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

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

// Sticky Code

const stickyItem = document.querySelector(".item- made-sticky")

document.addEventListener（“scroll”， （） => { stickyItem.style.transform = translateY（${window.scrollY}px） })

这是MarsAndBack和Miftah Mizwar回答的延续。

他们的答案是正确的。但是，很难确定问题的始祖。

简单来说，只需在浏览器控制台中运行这个jQuery脚本，它就会告诉您每个祖先上overflow属性的值。

$('.your-sticky-element').parents().filter(function() {
    console.log($(this));
    console.log($(this).css('overflow'));
    return $(this).css('overflow') === 'hidden';
});

如果一个祖先没有溢出:可见改变它的CSS使它有!

同样，正如在其他地方所述，确保你的sticky元素在CSS中有这个:

.your-sticky-element {
    position: sticky;
    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>

如果parent有float:属性，它就不起作用。