Question

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

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

Answer 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

粘性位置CSS仅部分起作用

1 个答案: