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


当前回答

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

其他回答

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

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

这里有两个答案:

从正文标签中移除溢出属性 设定高度:100%到机身以解决溢出问题y:自动

Min-height: 100%不工作,而不是高度:100%

注意空网格区域!

在我的例子中,我有这样的东西:

.cart-areas {
    grid-template-columns: 2fr 0.2fr 1.5fr;
    grid-template-areas:
      'order . summary'
      'order . .'
      'order . .';
}

我希望当用户完成结帐表单时,总结网格项具有粘性。它没有工作,因为那些空的网格项(用。标记)。

解决方案是删除这些空项,如下所示:

.cart-areas {
    grid-template-columns: 2fr 0.2fr 1.5fr;
    grid-template-areas:
      'order . summary'
      'order . summary'
      'order . summary';
}

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

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

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

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

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