javascript - 不包含在容器元素中的元素

Question

在我的网站上(使用 bootstrap 制作)，我的导航栏嵌入在一个容器 .boxed #wrapper 中，最大宽度为 800 像素(见第一张图片)。

问题出现在固定导航菜单(当用户向下滚动页面时可见)。

似乎对于固定菜单，菜单项和 Logo 不再嵌入容器(最大宽度为 800 像素)中。结果是 Logo 现在位于视口(viewport)的最左侧，无论屏幕大小如何，菜单项都位于最右侧，这在宽屏幕上看起来很奇怪。

我希望我的菜单项和 Logo 在初始静态菜单和固定菜单上都有位置，例如 this website .

我该如何解决这个问题？

参见 https://jsfiddle.net/cLt3pdzL/4/

初始位置:

向下滚动后:

<div id="nav" class="container-fluid">
  <nav class="navbar-classic">
    <li><a href="index.html" class="active">Who are we? </a>
      <ul class="dropdown">
        <li><a href="#">Sub 1</a></li>
        <li><a href="#">Sub 2</a></li>
      </ul>
    </li>
    <li><a href="#">Services Services Services</a>
    </li>

  </nav>
          <a href="#" class=""><img alt="" src="http://placehold.it/220x70" class=""></a>
</div>

Answer 1

这是我的解决方案。我创建了一个 div，除非滚动条达到 230px，否则它是不可见的，作为导航栏的背景:

HTML:

    <div id="nav" class="container-fluid">
      <nav class="navbar-classic">
        <li><a href="index.html" class="active">Who are we? </a>
          <ul class="dropdown">
            <li><a href="#">Sub 1</a></li>
            <li><a href="#">Sub 2</a></li>
          </ul>
        </li>
        <li><a href="#">Services Services Services</a></li>
      </nav>
      <a href="#" class=""><img alt="" src="http://placehold.it/220x70" class=""></a>
    </div>
    <!-- End Menu Container -->

CSS:

#nav.affix {
    position: fixed;
    top: 0;
    width: 100%;
    max-width: 800px;
    height: 70px;
    background: #fff;
    z-index: 10;
    opacity: 0.9;
    margin: 0 0 0 -10px;
    animation: fadein 2s;
    -moz-animation: fadein 2s;
    -webkit-animation: fadein 2s;
    -o-animation: fadein 2s;
    padding: 0 25px;
}

#nav.affix > .navbar-classic {
    height: 70px;
}

#nav.affix > .navbar-classic li {
    padding: 22px 5px 0;
}

#hidden-header-bg{
    width: 100%;
    height: 70px;
    top: 0;
    left: 0;
    background: #fff;
    display: none;
    position: fixed;
    z-index: 9;
}

.visible{
    display: block!important;
}

和JS:

  $( document ).ready(function() {
    $(window).scroll(function(){
      scrollTop = $(window).scrollTop();
      if(scrollTop > 280){
        $('#nav').addClass('affix');
        $('#hidden-header-bg').addClass('visible');
      }else{
        $('#nav').removeClass('affix');
        $('#hidden-header-bg').removeClass('visible');
      }
    });
  });

这是我的解决方案的链接:https://jsfiddle.net/cLt3pdzL/8/