gpt4 book ai didi

html - adminlte 中的粘性元素

转载 作者:行者123 更新时间:2023-11-28 00:52:10 26 4
gpt4 key购买 nike

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

我想把粘性 div 放在导航栏下面(在这个橙色的 div 中):
i want to place the sticky div under the navbar(in this orange 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 仍然无法正常工作,

预览

开始:
beginning

稍微滚动后:
after scroll a bit

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

最佳答案

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

position:sticky由于 <div class="wrapper">,无法在 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;">

关于html - adminlte 中的粘性元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53152350/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com