Adminlte fixed layout without fixed header

Question

所以我使用具有固定布局的 Adminlte。问题是我只想要修复侧边栏而不是 header。所以我删除了 position: fixed from main header。

问题 - 向下滚动时，边栏顶部有一个间隙（header 的大小）。

我一开始试过这个：

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

但问题是，如果您没有完全滚动过标题，侧边栏就会跳到它下面。

所以现在我在js中添加了一个函数来计算位置并相应地添加padding。它有点工作，但它滞后并且可能是一个糟糕的解决方案。

$(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"});
     }

  });

有没有更好的方法让侧边栏跳到顶部？

我意识到差距正在显现，因为 class main-sidebar 在顶部包含徽标。但是奇怪地修复 class .sidebar 不会影响 sidebar-collapse.

Answer 1

有两种非常简单的方法可以实现这一点

从正文中删除 fixed class（注意：这将使侧边栏可滚动）或
在main-headerclass
中添加css属性position: absolute
.main-header { position: absolute !important; }

Answer 2

或者您可以简单地在 main.php

上将“fixed”添加到正文中

<body class="hold-transition skin-blue sidebar-mini fixed">

Adminlte fixed layout without fixed header

Adminlte fixed layout without fixed header

html

javascript

css

adminlte