css - 菜单栏不会随滚动条左右移动

Question

我正在为我的网站制作菜单。我一直在针对较小的屏幕(对于大约 800 x 600 的屏幕)进行测试，每次我尝试将水平滚动条移到右侧以查看整个菜单时，我网站的主体会发生变化，但菜单不会发生变化。谁能帮忙？谢谢!网址:http://andrewgu12.kodingen.com/

CSS:

div#header-container {
     background-color: #003264; 
     height: 100px !important;
     box-shadow: 0px 5px 10px #666;
     min-width: 100%;
     z-index: 1;
     position: fixed;
     top: 0;
 }
 div#header {
    width: 960px;
    margin: 0 auto;
    padding: 0;
    color: #FFF;
    /*position: relative;*/
    top: 0;
 }
div#header ul{
    height: 100px;
    list-style-type: none;
    float: right;
}
div#header ul li {
    background-color: #003264;  
    text-align: center;
    height: 100px;
    line-height: 100px;
    transition: background-color 1s;
     -webkit-transition: background-color 1s;
    display: inline;
     padding: 0;
    margin: 0;
 }

HTML

<div id="header-container">
        <div id="header" class="row">   
            <nav class="nav-bar">
                <ul class="left">
                    <li data-slide="1" class="andrewgu"><a href="">andrewgu</a></li>
                </ul>
                <ul class="right">
                    <li data-slide="2" class="portfolio"><a href="">portfolio</a></li>
                    <li data-slide="3" class="about"><a href="">about</a></li>
                    <li data-slide="4" class="contact"><a href="">contact</a></li>
                 </ul>
            </nav>
        </div><!--end header-->
    </div><!--end header-container-->           

编辑:有没有一种方法可以在 CSS 中做到这一点，只需要随着浏览器宽度的减小而减小左右菜单项之间的间距？

Answer 1

发生这种情况的原因是菜单的 css 中的 position: fixed;。这是固定位置的预期行为，它基本上忽略了滚动条。如果您想在不使用 css 属性的情况下将菜单保持在顶部，我建议您查看 javascript 解决方案。

也许看看这篇文章:Leave menu bar fixed on top when scrolled

或者，有一个很棒的 jquery 插件可以实现这一点，也称为 jquery-scrollspy，可以在这里找到:https://github.com/sxalexander/jquery-scrollspy

希望这对您有所帮助。