Search code examples
javascripthtmlcssadminlte

Adminlte fixed layout without fixed header

So im using Adminlte with a fixed layout. The thing is I only wanted the sidebar fixed and not the header. So I removed the position: fixed from the main header.

The problem - when scrolling down there is a gap (the size of header) at the top of the sidebar.

enter image description here

I tried this at first : 

.fixed .main-sidebar{
   padding-top:0;
}

But the problem is if you don't scroll past the heading completely the sidebar jumps under it.

enter image description here

So now I added a function in js to calculate the position and add padding accordingly. Its kinda working but its laggy and probably a bad solution. 

$(window).scroll(function () {

     var positionNow = $(window).scrollTop();

     if (positionNow < 50){
         $('.fixed .main-sidebar').css({"padding-top" : 50 - positionNow});
     } else {
         $('.fixed .main-sidebar').css({"padding-top" : "0"});
         $('.main-sidebar').css({"padding-top" : "0"});
     }

  });

Is there a better way to make the sidebar jump to top?

I realized that the gap is showing because the class main-sidebar includes the logo at top. But making the class .sidebar fixed weirdly doesn't affect sidebar-collapse.

Solution

  • There are two very simple way to achieve this

    1. Remove fixed class from body(Note: It will make sidebar scrollable) or

    2. Add css property position: absolute in main-header class

      .main-header { position: absolute !important; }