滚动后导航栏没有响应

Question

我是网络开发的新手。我在设计滚动导航栏时遇到了一个问题。

我用这个引导网格和jquery。如果我不向下滚动并调整窗口大小，那么一切都很好。导航栏被调整大小，并在窗口的中心。但是当我向下滚动时，导航栏的大小将被固定。当我使窗口变大时它的大小不会改变（如果我缩小窗口但不居中），它的大小就不会变化。这可能是由js文件中的width：nav.width（）造成的，但我不知道如何解决它。

这是一个新帐户，所以我没有足够的信誉上传图片。我会尝试用单词来形容它。例如，在开始时，导航栏的父级为1140px，导航栏的宽度为100％，因此其大小为1140px。如果我调整窗口大小，让我们说它的父宽度是720px，那么导航栏宽度也是720px。然后，如果向下滚动，js中的回调函数将运行，它会将宽度设置为720px，这是一个固定值，因此它将不再负责。现在，如果我调整窗口的大小使其父母回到1140px，导航栏的宽度是720px而不是1140.那么如何解决这个问题呢？

<div class="container"> 
     <div class="row"> 
      <div class="col-md-12"> 
       <header id="home" style="height:300px"> 
        <nav id="nav-wrap"> 
         <ul id="nav" class="nav"> 
          <li class="current"> 
           <a href="">Home</a> 
          </li> 
          <li class="smotthscroll"> 
           <a href=""> About </a> 
          </li> 
          <li class="smotthscroll"> 
           <a href=""> Portfolio </a> 
          </li> 
          <li class="smotthscroll"> 
           <a href=""> Skills </a> 
          </li> 
          <li class="smotthscroll"> 
           <a href=""> Contact </a> 
          </li> 
         </ul> 
        </nav> 
       </header> 
      </div> 
     </div> 
     </div> 

CSS

#nav-wrap { 
    font: 22px 'opensans-bold', sans-serif; 
    width: 100%; 
    margin: 0 auto; 
    left: 0; 
    top: 0; 

} 


    ul#nav { 
    text-align: center; 
    padding: 0; 
    width: 100%; 
    background: rgba(0, 0, 0, 0.3); 
    z-index: 2; 
} 

    ul#nav li { 
    height: 48px; 
    display: inline-block; 
} 

    ul#nav li a { 
    color:white; 
    padding: 8px 13px; 
    display: inline-block; 
    text-align: center; 
} 


    $(function() { 
    var nav = $('#nav'); 
    var navHomeY = nav.offset().top; 
    var isFixed = false; 
    var navWrap = $('#nav-wrap'); 
    var $w = $(window); 
    $w.scroll(function() { 
     var scrollTop = $w.scrollTop(); 
     var shouldBeFixed = scrollTop > navHomeY; 
     if(shouldBeFixed && !isFixed) { 
      nav.css({ 
       position: 'fixed', 
       width: nav.width() 
      }); 
      isFixed = true; 
     }else if (!shouldBeFixed && isFixed) { 
      nav.css({ 
       position: 'static' 
      }); 
      isFixed = false; 
     } 
    }); 
}); 

Answer 1

你的问题很可能来自这一部分。

var shouldBeFixed = scrollTop > navHomeY; 
     if(shouldBeFixed && !isFixed) { 
      nav.css({ 
       position: 'fixed', 
       width: nav.width() 
      }); 
      isFixed = true; 

尝试将所有部分一起反转或删除。这是说，如果导航栏不在顶部，请添加固定位置以及nav.width()，无论您设置的是否相等 - 这正是您想要的相反，因为这是您的问题根据题。