我想让导航栏粘在视口的顶部一旦用户滚动页面,但它不工作,我不知道为什么。如果你可以帮助,这是我的HTML和CSS代码:

.container { min-height: 300vh; } .nav-selections { text-transform: uppercase; letter-spacing: 5px; font: 18px "lato",sans-serif; display: inline-block; text-decoration: none; color: white; padding: 18px; float: right; margin-left: 50px; transition: 1.5s; } .nav-selections:hover{ transition: 1.5s; color: black; } ul { background-color: #B79b58; overflow: auto; } li { list-style-type: none; } <main class="container"> <nav style="position: sticky; position: -webkit-sticky;"> <ul align="left"> <li><a href="#/contact" class="nav-selections" style="margin-right:35px;">Contact</a></li> <li><a href="#/about" class="nav-selections">About</a></li> <li><a href="#/products" class="nav-selections">Products</a></li> <li><a href="#" class="nav-selections">Home</a></li> </ul> </nav> </main>


当前回答

这是什么绊倒了我…我的粘性div是在另一个div,所以父div需要一些额外的内容后粘性div,使父div“足够高”的粘性div,以“滑过”其他内容,因为你向下滚动。

所以在我的情况下,在黏黏的div之后,我必须添加:

    %div{style:"height:600px;"} 
      &nbsp;

(我的应用程序有两个并排的div,左边是一个“高”图像,右边是一个短的数据输入表单,我希望当你向下滚动时,数据输入表单漂浮在图像旁边,这样表单就总是在屏幕上。它不会工作,直到我添加了上面的“额外内容”,这样粘性div就有东西可以“滑动”

其他回答

我也有同样的问题。对我来说,问题在于大屏幕上的显示:“none”(media-query)和智能手机上的显示:“initial”。如果我删除了display css属性,并在桌面上添加了不透明度和指针事件,一切都解决了。

检查祖先元素是否有溢出集(例如overflow:hidden);试着切换它。您可能需要检查DOM树的位置高于您的预期=)。

这可能会影响你的位置:粘在一个后代元素上。

从我的评论来看:

位置:粘需要一个坐标来确定粘的位置

nav { position: sticky; top: 0; } .nav-selections { text-transform: uppercase; letter-spacing: 5px; font: 18px "lato", sans-serif; display: inline-block; text-decoration: none; color: white; padding: 18px; float: right; margin-left: 50px; transition: 1.5s; } .nav-selections:hover { transition: 1.5s; color: black; } ul { background-color: #B79b58; overflow: auto; } li { list-style-type: none; } body { height: 200vh; } <nav> <ul align="left"> <li><a href="#/contact" class="nav-selections" style="margin-right:35px;">Contact</a></li> <li><a href="#/about" class="nav-selections">About</a></li> <li><a href="#/products" class="nav-selections">Products</a></li> <li><a href="#" class="nav-selections">Home</a></li> </ul> </nav>

除了FF和Chrome,其他浏览器也可以使用polyfill。这是一个实验性的规则,可以通过浏览器随时实现,也可以不实现。Chrome在几年前添加了它,然后删除了它,它似乎回来了…但能持续多久呢?

最接近的是position:relative +坐标,当滚动到达粘性点时更新,如果你想将其转换为javascript脚本

我也有同样的问题,我在这里找到了答案。

如果你的元素没有像预期的那样粘在一起,首先要检查应用到容器上的规则。

具体来说,查找元素的任何父元素上设置的溢出属性。不能在position: sticky元素的父元素上使用:overflow: hidden、overflow: scroll或overflow: auto。

如果parent有float:属性,它就不起作用。