adminlte 中的粘性元素答案

【问题标题】：Sticky element in adminlteadminlte 中的粘性元素
【发布时间】：2018-11-05 10:18:13
【问题描述】：

目前我正在使用 adminlte 模板，我想制作一个具有粘性行为的元素，但我不知道即使放在不同的 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。但不要认为这是问题所在。

【问题讨论】：

你当前的输出是什么样的？
目前我的输出与我将 div 放在常规 div 上一样，它一直在滚动。
你得到的行为是针对“粘性元素”的。它们是根据 html 结构放置的，但它们只能向上滚动到给定的顶部值。你可能想要的是一个固定的元素。固定元素不会滚动
我尝试过，但固定元素不适合我的需要，因为它会在我滚动后留下一个间隙（导航栏向上滚动但 div 仍然有 top:3em; 间隙）跨度>

标签： html css laravel adminlte

【解决方案1】：

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

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

我的灵感来自这个article.，它提到如果我们将它放在具有overflow:hidden 的父级下，粘性将不起作用，因此浏览器无法计算正确的值（高度）来确定它何时粘人

所以结论

确保您的父 div 的 overflow 设置为 style="overflow:visible visible;" 以覆盖 adminLTE 的样式。

这是我的完整语法：

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

【讨论】：

【解决方案2】：

如果你让它不粘但可能会

.sticky {
   position: fixed;
}

【讨论】：

考虑格式化您的答案，以便您的示例在块内，类似于最初询问的方式。
你好，我放了 top:0px;之前，它没有做任何改变。为了确保，我一次又一次地把它放回去，它什么也没有。