我想让导航栏粘在视口的顶部一旦用户滚动页面,但它不工作,我不知道为什么。如果你可以帮助,这是我的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>


当前回答

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

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

其他回答

用于位置:粘;要工作,你的sticky元素应该放在body标签的右边,作为一个直接的子元素 不应该有任何包装divs或类似的东西。 因为它只能在到达父元素的底部之前保持固定。 你应该指定它应该粘在哪里,比如:top: 0;

有趣的时刻,我不明显:至少在Chrome 70的位置:粘是不适用的,如果你已经使用DevTools设置。

如果你遇到这种情况,你的粘性不工作-试着设置父:

display: unset

为我工作

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

我知道这是一个老帖子。但如果有人像我一样,最近才开始摆弄位置:粘性,这可能是有用的。

在我的例子中,我使用position: sticky作为网格项。它没有工作,问题是一个溢出x:隐藏在html元素。只要我删除了该属性,它就工作得很好。有溢出x:隐藏在身体元素似乎工作,但不知道为什么。