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


当前回答

另一个position: sticky不能工作的常见场景是,如果它的父类有display: flex或display: grid。

在这种情况下发生的是粘性位置在工作,但你看不到它,因为元素被完全拉伸了。尝试使用align-self: baseline降低它的高度,你会看到效果。

其他回答

如果danday74的修复不起作用,检查父元素是否有一个高度。

在我的情况下,我有两个孩子,一个漂浮在左边,一个漂浮在右边。 我想要右边的浮动一个变得粘性,但必须添加一个<div style="clear: both;"></div>在父元素的末尾,赋予它高度。

我知道太晚了。但我发现了一个解决方案,即使你使用溢出或显示:flex在父元素粘性将工作。

步骤:

为你想要设置粘性的元素创建一个父元素(确保创建的元素是相对于主体或全宽和全高的父元素)。 向父元素添加以下样式: { 位置:绝对的; 身高:100 vmax; } 对于粘滞元素,请确保添加的z-index高于页面中的所有元素。

就是这样!现在它必须起作用。问候

尽管阅读了整个页面,尝试了所有的方法,但在我的移动设备上,这就是不能工作。没有任何棘手的操作——这是我唯一需要它发挥作用的地方。我已经排除了任何特殊的名称或覆盖,将阻止它在这个屏幕宽度的功能。清除我的移动格式化代码作为测试,没有看到任何变化。在我笔记本电脑上的Chrome浏览器上运行得很好,但在我的新S10上的Chrome浏览器上就完全不行。

关于位置粘性最常见的错误之一是:

浏览器不支持 不包括任何上、下、右、左属性。请记住,如果您没有提供足够的信息,浏览器将不知道如何正确处理这些信息。如果没有它,它将是静态定位的。

在这篇文章中,我已经写过这方面的内容。只是做个参考,这样我就不会重复太多了。

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

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

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