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


当前回答

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

其他回答

1.如果overflow在元素的任何父元素上设置为hidden、scroll或auto,位置粘滞很可能不起作用。

2.如果任何父元素都设置了高度,位置粘滞可能无法正常工作。

// Sticky Code

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

document.addEventListener(“scroll”, () => { stickyItem.style.transform = translateY(${window.scrollY}px) })

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

似乎导航栏被粘不应该在任何div或部分与其他内容。没有一个解决方案是为我工作,直到我把导航栏从div,导航栏与另一个topbar共享。我以前有topbar和导航栏包装一个共同的div。

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

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