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


当前回答

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

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

其他回答

z指数也很重要。有时候它会起作用,只是你看不到而已。试着把它设置为一个非常高的数字,只是为了确定。也不要总是放top: 0,而是尝试一些更高的,以防它被隐藏在某个地方(在工具栏下面)。

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

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

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

如果你的父母正在使用显示伸缩,粘滞位置将不起作用。当我在一个溶液中读到这个

由于flex box元素默认为拉伸,因此所有元素的高度都相同,不能滚动。

如果你使用display: flex;在父元素上,你必须添加这个到sticky元素align-self: flex-start;同时设置height为auto height: auto;

这就是sticky元素类的样子

.stick-ontop {
  position: -webkit-sticky !important; // for safari
  position: sticky !important;
  top: 0;
  align-self: flex-start;
  height: auto;
}

我不得不使用下面的CSS来让它工作:

.parent {
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    overflow: visible;
}

.sticky {
    position: sticky;
    position: -webkit-sticky;
    top: 0;
}

如果以上都不管用,那么……

遍历所有祖先元素,确保这些元素都没有overflow: hidden。您必须将此更改为overflow: visible