adminlte 中的粘性元素

Question

目前我正在使用 adminlte 模板，我想制作一个具有粘性行为的元素，但我不知道即使放在 diverent div的。

我想把粘性 div 放在导航栏下面（这个橙色 div）：

CSS:

.sticky{
  position: -webkit-sticky;
  position: sticky;
  width: 100%;
}

HTML:

@section('content')
<div id="page-top" style="margin-top: -15px ">
<div class="sticky" style="background: #66c1bd;height: 3em;top:0px;position: sticky;position: -webkit-sticky;">
        test
      </div>
  <!-- multistep form -->
  <!-- The Modal -->
</div>

即使我使用内联 CSS 仍然无法正常工作，

预览

开头：

稍微滚动一下后：

另一个信息，我正在使用 laravel。但不要认为这是问题。

Answer 1

也许如果你让它不粘但是

.sticky {
   position: fixed;
}

Answer 2

我想我已经找到了问题的正确答案。

由于 <div class="wrapper">，position:sticky 在 adminLTE 中无法正常工作（您可以在 body 标签下找到它。

我从这个 article 中得到灵感，它提到如果我们将它放在具有 overflow:hidden 的父项下，粘性将不起作用，因此浏览器无法计算正确的值（高度) 来判断什么时候粘

所以结论

make sure the overflow of your parent div set to be style="overflow:visible visible;" to overide the style that adminLTE has.

这是我的完整语法：

<body class="hold-transition skin-black-light sidebar-mini">
<!-- Site wrapper --><div class="wrapper" style="overflow:visible visible;">

adminlte 中的粘性元素

Sticky element in adminlte

html

css

laravel

adminlte