Question

当前，我正在使用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。但是不要以为这是问题。

Answer 1

Maby，如果您使其不粘而

.sticky {
   position: fixed;
}

Answer 2

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

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

我从这个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 个答案: