我知道这是一个老帖子。但如果有人像我一样，最近才开始摆弄位置:粘性，这可能是有用的。

在我的例子中，我使用position: sticky作为网格项。它没有工作，问题是一个溢出x:隐藏在html元素。只要我删除了该属性，它就工作得很好。有溢出x:隐藏在身体元素似乎工作，但不知道为什么。

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

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

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

在你的例子中，你必须通过使用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>

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

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

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

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

从我的评论来看:

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

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脚本

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

由于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;
}