Question

我正在为我的网站制作一个菜单。我一直在测试它用于较小的屏幕（屏幕大约800乘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

希望这有帮助。

Answer 2

问题在于Foundation.css 设置最大宽度。为了使其更具响应性，我们将使用@meta缩放。 CSS 3的If。

使用此代码：

@media (max-width: 960px) {
  div#header {
    max-width:100%
  }
}

如果不起作用，请在脑海中使用：

<meta name="viewport" content="width=device-width, initial-scale=1">

加入我的Skype：JonasRothmann

检查此源代码：http://script9.net/basel/

Jonas Rothmann Hjalager

Answer 3

如果您想让它水平滚动，而不是垂直滚动，您将不会遇到仅限CSS的解决方案。这是一个适合您的jQuery解决方案

$(window).scroll(function(){
  $('div#header-container').css('left','-'+$(window).scrollLeft()+'px');
});

使用滚动条，菜单栏不会向左或向右移动

3 个答案: