Навигационная панель не реагирует после прокрутки

Question

Я новичок в веб-разработке. Я столкнулся с проблемой при проектировании навигационной панели прокрутки.

Для этого я использовал сетку бутстрапа и jquery. Если я не прокручу вниз и просто изменим размер окна, тогда все будет хорошо. Панель навигации изменена и в центре окна. Но после прокрутки вниз размер навигационной панели будет исправлен. Его размер не изменится, когда я сделаю окно больше (оно будет меньше, если я сделаю окно меньше, но не центрировано). Это может быть вызвано установкой ширины: nav.width() в js-файле, но я не знаю, как это исправить.

Это новая учетная запись, поэтому у меня недостаточно репутации для загрузки изображений. Я попытаюсь описать это с помощью слов. Например, в начале родительский элемент навигационной панели составляет 1140 пикселей, ширина панели навигации 100%, поэтому ее размер составляет 1140 пикселей. Если я изменил размер окна, скажем, ширина его родительского элемента равна 720px, тогда ширина панели навигации также равна 720px. Затем, если я прокручу вниз, будет выполняться функция обратного вызова в js, она установит ширину 720px, которая является фиксированным значением, поэтому она больше не будет отвечать. Теперь, если я изменил размер окна, чтобы вернуть его родительскому элементу до 1140 пикселей, ширина панели навигации составляет 720 пикселей, а не 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(), независимо от того, что вы установили равным - и это точно противоположно тому, что вы хотите, потому что это ваша проблема в соответствии с вопрос.