粘性位置 CSS 仅部分有效答案

【问题标题】：Sticky position CSS only partly works粘性位置 CSS 仅部分有效
【发布时间】：2019-02-22 07:53:52
【问题描述】：

我正在尝试制作一个顶部有菜单栏的网站。在一些特别长的页面上，我不希望用户必须一直向上滚动才能访问它。当我使用位置粘性时，它可以工作，但是在滚动一定量后它就会消失。它消失的距离是恒定的。有谁知道如何解决这个问题？

html:

<nav>
<ul class="menu-area">
    <li><a href="./index.html">Home</a></li>
    <li><a href="./Acclaims.html">Acclaims</a></li>
    <li><a href="https://www.youtube.com/user/asdf" target="_blank">Youtube</a></li>
    <li>
        <a href="https://www.google.com/search?asdf"
           target="_blank">Images</a></li>
    <li><a href="./contact.html">Contact</a></li>
</ul>

css:

.menu-area li a {
    text-decoration: none;
    color: #000;
    letter-spacing: 4px;
    text-transform: uppercase;
    display: block;
    padding: 0 25px;
    font-size: 14px;
    line-height: 30px;
    z-index: 1;
}

.menu-area li {
    list-style: none;
    display: inline-block;
}

nav {
    padding: 10px 20px 10px 10px;
    text-align: center;
    background: #eaedf2;
    margin: auto;
    width: calc(100%);

    position: sticky;
    top: 0;
}

.menu-area li a:hover {
    background: black;
    color: #eaedf2;
}

【问题讨论】：

你能给我们看看代码吗？
stackoverflow.com/a/52997848/8620333 / stackoverflow.com/a/54610362/8620333 的可能副本
会不会是因为position 在某些时候发生了变化？

标签： css sticky

【解决方案1】：

能否请您在 codepen（或任何您喜欢的）上提供您的 HTML + CSS 代码？

在我看来，位置粘性还没有为生产性网站做好准备，至少没有提供适当的后备 (https://caniuse.com/#search=position%3A%20sticky)。

考虑简单地使用 javascript 解决方案。这样做的解决方案有很多。我最喜欢的仍然是：Headroom.js - https://wicky.nillia.ms/headroom.js

如果您只想使用 JS 解决方案作为后备方案，请尝试以下操作：https://modernizr.com/download?csspositionsticky-setclasses&q=position

【讨论】：