“位置:粘性”属性是如何工作的?

我想让导航栏粘在视口的顶部一旦用户滚动页面，但它不工作，我不知道为什么。如果你可以帮助，这是我的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，导航栏与另一个topbar共享。我以前有topbar和导航栏包装一个共同的div。

2019-01-09 05:11:37

其他回答

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

2021-08-26 17:56:20

// Sticky Code

const stickyItem = document.querySelector(".item- made-sticky")

document.addEventListener（“scroll”，（） => { stickyItem.style.transform = translateY（${window.scrollY}px） })

2021-11-11 22:38:44

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

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

2019-04-29 14:39:19

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

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

2017-12-19 00:36:39

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