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


当前回答

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

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

其他回答

从我的评论来看:

位置:粘需要一个坐标来确定粘的位置

nav { position: sticky; top: 0; } .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; } body { height: 200vh; } <nav> <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>

除了FF和Chrome,其他浏览器也可以使用polyfill。这是一个实验性的规则,可以通过浏览器随时实现,也可以不实现。Chrome在几年前添加了它,然后删除了它,它似乎回来了…但能持续多久呢?

最接近的是position:relative +坐标,当滚动到达粘性点时更新,如果你想将其转换为javascript脚本

我知道这个问题似乎已经有了答案,但我遇到了一个具体的案例,我觉得大多数答案都没有抓住重点。

溢出:隐藏答案覆盖了90%的情况。这或多或少是“粘性导航”的情况。

但是粘性行为最好在容器高度内使用。想象一下,在你网站的右栏中,有一个新闻简报的形式,它可以随着页面向下滚动。 如果sticky元素是容器的唯一子元素,那么容器的大小是完全相同的,并且没有滚动的空间。

你的容器需要是你期望元素滚动的高度。在右列的情况下就是左列的高度。 实现这一点的最佳方法是在列上使用display:table-cell。如果你不能,并且像我一样被float:right困住了,你必须要么猜左列的高度,要么用Javascript计算它。

粘滞元素的真实行为是:

首先,在一段时间内它是相对的 然后它会被修复一段时间 最后,它从视图中消失了

固定定位的元素被视为相对定位,直到它的包含块在其流根(或它滚动的容器)内越过指定的阈值(例如将top设置为非auto的值),此时它被视为“卡住”,直到遇到其包含块的对边。

元素根据文档的正常流定位,然后根据顶部、右侧、底部和左侧的值相对于其最近的滚动祖先和包含块(最近的块级祖先)进行偏移,包括与表相关的元素。偏移量不会影响任何其他元素的位置。

这个值总是创建一个新的堆叠上下文。请注意,粘滞元素“粘滞”到具有“滚动机制”的最近的祖先上(当overflow被隐藏、滚动、自动或覆盖时创建),即使该祖先不是最近的实际滚动祖先。

这个例子将帮助你理解:

代码https://codepen.io/darylljann/pen/PpjwPM

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

粘性定位是相对定位和固定定位的混合体。元素被视为相对定位,直到它超过指定的阈值,此时它被视为固定定位。 ... 您必须指定一个阈值,其中至少有一个是上、右、下或左,以便粘滞定位按预期的方式工作。否则,它将与相对定位难以区分。 (来源:中数)

在你的例子中,你必须通过使用top属性来定义它最后应该停留的位置。

html, body { height: 200%; } nav { position: sticky; position: -webkit-sticky; top: 0; /* required */ } .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; } <nav> <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>