Блог

У меня есть адаптивная веб-страница и липкое меню, расположенное первым в середине страницы или около того. Когда я прокручиваю и меню достигает вершины, оно становится фиксированным. Это работает просто отлично, проблема в том, что когда я изменяю размер содержимого над меню, оно, конечно, становится менее высоким, поэтому, когда я снова прокручиваю назад, меню не становится липким, когда я достигаю вершины, потому что оно по-прежнему считает, что содержимое выше находится на том же уровне, что и до изменения размера, ине замечает, что содержимое изменилось. Таким образом, меню становится липким не тогда, когда оно достигает вершины, если только оно не превышает вершину. Требуется несколько мгновений, чтобы стать липким. Если я обновляю браузер, эта проблема не отображается, она отображается только при изменении размера. Я хочу знать, есть ли какое-либо решение для меню, учитывающее изменение размера? Это мой код:

 <header>
  <nav>
    <ul>
      <li>
        <a href='#about'>
          About
        </a>
      </li>
      <li>
        <a href='work.html'>
          Work
        </a>
      </li>
      <li>
        <a href='#services'>
          Services
        </a>
      </li>
      <li>
        <a href='#contact'>
          Contact
        </a>
      </li>
    </ul>
  </nav>
</header>


    header {
      background-color: white;
      border-bottom: 1px solid #eaeaea;
      /*  box-shadow: 1px 0 2px 1px rgba(0, 0, 0, 0.2);*/
      padding: .5em 0;
    }
    header h1 {
      display: none;
    }
    header ul {
      text-align: center;
    }
    header ul li {
      display: inline-block;
    }
    header ul li a {
      padding: 1.08em 0.3em;
      text-transform: uppercase;
      color: #01486b;
      font-size: .8em;
      font-weight: 300;
    }
    header ul li a:hover {
      color: #139ee3;
    }
    .padding
    {
      padding: 3.61em 0 0 0;
    }



      function navigate(e) {
        var element = $(this).attr('href');
        var where = $(element).offset().top-71.5;
        $('html, body').animate({scrollTop:where},1000,'swing');
        e.preventDefault();
      }
      $('nav a').on('click', navigate);



      var offset = $('header').offset().top;
      function changeClass(e) {
        var countScroll = $('html').scrollTop() || $('body').scrollTop();
        if (countScroll >= offset) {
          $('header').addClass('fixed_menu');
          $('main').addClass('padding');
        } else {
          $('header').removeClass('fixed_menu');
          $('main').removeClass('padding');
        }
        e.preventDefault();
      }
      $(document).on('scroll',changeClass);
 

используйте:

 var countScroll = $('body').scrollTop();
 

Вместо

 var countScroll = $('html').scrollTop() || $('body').scrollTop();