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


当前回答

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

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

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

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

其他回答

这是什么绊倒了我…我的粘性div是在另一个div,所以父div需要一些额外的内容后粘性div,使父div“足够高”的粘性div,以“滑过”其他内容,因为你向下滚动。

所以在我的情况下,在黏黏的div之后,我必须添加:

    %div{style:"height:600px;"} 
      &nbsp;

(我的应用程序有两个并排的div,左边是一个“高”图像,右边是一个短的数据输入表单,我希望当你向下滚动时,数据输入表单漂浮在图像旁边,这样表单就总是在屏幕上。它不会工作,直到我添加了上面的“额外内容”,这样粘性div就有东西可以“滑动”

粘滞元素的真实行为是:

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

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

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

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

这个例子将帮助你理解:

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

关于位置粘性最常见的错误之一是:

浏览器不支持 不包括任何上、下、右、左属性。请记住,如果您没有提供足够的信息,浏览器将不知道如何正确处理这些信息。如果没有它,它将是静态定位的。

在这篇文章中,我已经写过这方面的内容。只是做个参考,这样我就不会重复太多了。

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

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