html - 粘性导航栏不会跟随 Internet Explorer 和 Chrome 中的页面滚动

Question

我在 Safari 中编写了一个网站，它完全符合我的要求。但是，水平粘性导航栏似乎不会跟随 Internet Explorer、Chrome 和 Firefox 中的页面滚动。

我尝试过应用 overflow: auto，但没有用，我很难解决这个问题。有人知道怎么做吗？

  <div id="navbar">
<div id="navbar-links">
  <ul>
    <li><a href="index.html">HOME |</a></li>
    <li><a href="index.html#features">FEATURES |</a></li>
    <li><a href="index.html#xxx">XXX |</a></li>
    <li><a href="index.html#xxx">XXX |</a></li>
    <li><a href="index.html#xxx">XXX |</a></li>
    <li><a href="index.html#demo">DEMO |</a></li>
    <li><a href="index.html#xxx">XXX |</a></li>
    <li><a href="index.html#xxx">XXX |</a></li>
    <li><a href="index.html#contact">CONTACT |</a></li>
  </ul>
</div>
<div id="navbar-logo">
  <a href="index.html"><h1>NAME<img src="images/logo.png" height="30px" width="30px"></h1></a>
</div>

#navbar h1{
    font-family: "Gill Sans", Arial, Helvetica, sans-serif;
    font-weight: 500;
    letter-spacing: 10px;
    font-size: 32px;
    text-align: center;
    padding-left: 2%;
}
#navbar-logo a{
    font-family: "Gill Sans", Arial, Helvetica, sans-serif;
    font-weight: 500;
    letter-spacing: 10px;
    font-size: 32px;
    text-align: center;
    padding-left: 2%;
    text-decoration: none;
    color: #000000;
    display: block;
}
#navbar{
    width: 100%;
    background-color: #ffffff;
    padding: 14px 10px 4px 10px;
    position: -webkit-sticky;  
    top: 0;  
    z-index: 1;
    overflow: auto;
}
#logo{
    width: 40%;
    float: left;
    margin: 0px;
    padding: 0px;
}
#navbar-links{
    width: 60%;
    float: right;
    margin: 0px;
    padding-right: 2%;
    list-style: none;
    font-family: "Gill Sans", Arial, Helvetica, sans-serif;
    letter-spacing: 5px;
    font-weight: normal;
    font-size: 11px;
    text-transform: uppercase;
    text-align: right;
}

#navbar-links ul{
    width: 100%;

    margin: 0px;
    float: right;
}
    #navbar-links li{
        display: inline;
        padding: 0px;
    }

    #navbar-links li a:link{
        color: #000000;
        text-decoration: none;
    }

    #navbar-links li a:visited {
        color: #000000;
        text-decoration: none;
    }

    #navbar-links li a:hover{
        color: #c3c3c3;
        text-decoration: none;
    }

    #navbar-links li a:active{
        color: #c3c3c3;
        text-decoration: none;
}

Answer 1

尝试:

#navbar { position: fixed; }

Webkit 是 Apple Safari 浏览器的渲染引擎，因此 position: -webkit-sticky 在其他浏览器中不起作用。阅读有关 CSS position 属性的更多信息 here .