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。

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

1 个答案: