首页 文章

管理固定布局没有固定标头

提问于
浏览 次
0

所以我使用Adminlte固定布局 . 事情是我只想要侧边栏固定而不是 Headers . 所以我删除了位置：从主 Headers 修复 .

问题 - 当向下滚动时，侧边栏的顶部有一个间隙（ Headers 的大小） .

enter image description here

我一开始尝试了这个：

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

但问题是，如果你没有完全滚过 Headers ，侧边栏就会跳过它 .

enter image description here

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

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

  });

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

我意识到差距正在显现，因为课程主侧边栏包含顶部的徽标 . 但是将类.sidebar固定奇怪地固定不会影响侧边栏崩溃 .

javascript html css adminlte

1 回答

  • 2

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

    • 从正文中删除 fixed 类（ Note: It will make sidebar scrollable ）或

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

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

    回复于

相关问题