滾動後導航欄沒有響應

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()，無論您設置的是否相等 - 這正是您想要的相反，因爲這是您的問題根據題。