Adminlte 固定布局没有固定标题答案

【问题标题】：Adminlte fixed layout without fixed headerAdminlte 固定布局没有固定标题
【发布时间】：2023-03-18 05:00:01
【问题描述】：

所以我使用具有固定布局的 Adminlte。问题是我只想固定侧边栏而不是标题。所以我从主标题中删除了位置：固定。

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

我一开始试过这个：

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

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

所以现在我在 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 并不会影响侧边栏折叠。

【问题讨论】：

是否有必要让你的标题在你的sidenav之上，如果没有你可以尝试给你的sidenav一个更高的z-index
你能提供header和sidenav的代码吗，header如何可见和隐藏，sidenav的行为如何
如果你的标题是 :hidden $('.fixed .main-sidebar') 得到 padding-top 0，你可以构建一个函数
哦，Adminlte 内置了固定功能。我只需要添加固定到正文的类..

标签： javascript html css adminlte

【解决方案1】：

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

从正文中删除 fixed 类（注意：它会使侧边栏可滚动）或
在main-header类中添加css属性position: absolute

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

【讨论】：

您能再解释一下吗？如果我需要固定侧边栏，为什么要从正文中删除固定类？
@sasq 如果您想修复侧边栏，请按照第二步进行。
哇，它有效。不敢相信它是如此简单。弄乱了标题，现在它缩小到水平页面的一半，但我会尝试解决这个问题。除此之外，它的工作原理，谢谢！

【解决方案2】：

或者您可以简单地将“fixed”添加到 main.php 上的正文中

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

【讨论】：