javascript - 没有固定标题的 Adminlte 固定布局

Question

所以我使用具有固定布局的 Adminlte。问题是我只想要固定侧边栏而不是标题。所以我删除了 position: fixed 从主标题。

问题 - 向下滚动时，边栏顶部有一个间隙(标题的大小)。

一开始我试过这个:

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

  });

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

我意识到差距正在显现，因为类主侧边栏在顶部包含 Logo 。但是奇怪地固定类 .sidebar 不会影响侧边栏折叠。

Answer 1

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

1. 从正文中删除 fixed 类(注意:这将使侧边栏可滚动)或

2. 在 main-header 类中添加 css 属性 position: absolute

   .main-header {
position:absolute!重要；
}