Липкий Анимация Заголовка Отскакивая на Свитке - PullRequest
Новая
       14

Липкий Анимация Заголовка Отскакивая на Свитке

0 голосов
/ 23 марта 2019

Я использую модифицированную версию On-Scroll Animate Header от codrops , и у меня возникла проблема с подпрыгиванием меню вверх и вниз при прокрутке вверху.

Это мой модифицированный код: 

var cbpAnimatedHeader = (function() {

var docElem = document.documentElement,
    didScroll = false,
changeHeaderOn = 160;

function init() {
    window.addEventListener( 'scroll', function( event ) {
        if( !didScroll ) {
            didScroll = true;
            setTimeout( scrollPage, 250 );
        }
    }, false );
}

function scrollPage() {
var sy = scrollY();
    if ( sy >= changeHeaderOn ) {
  $('body > header').addClass('header--sticky');
    }   else {
        $('body > header').removeClass('header--sticky');
    }
    didScroll = false;
}

function scrollY() {
    return window.pageYOffset || docElem.scrollTop;
}

init();

})();

Код в целом работает нормально, однако, когда я прокручиваю один «щелчок» по моей мыши из верхней позиции (загрузка страницы по умолчанию), кажется, что заголовоксидеть в подвешенном состоянии и подпрыгивать между добавлением и удалением класса, который у меня есть.У кого-нибудь есть какие-либо предложения относительно того, какие изменения мне нужно внести, чтобы заставить это работать должным образом?

Рабочую демонстрацию можно найти по адресу www.linkup.co.nz / preview /

1 Ответ

0 голосов
/ 23 марта 2019

Проблема в том, что, когда заголовок становится липким, заголовок больше не включается в высоту страницы и больше не прокручивается вниз на 160 пикселей. Вот это проблема шаг за шагом.

  1. Страница прокручивается вниз на 200px
  2. Заголовок становится липким, а его высота вычитается из страницы.
  3. Страница теперь прокручивается только на 141 пиксель.
  4. Заголовок становится неприлипающим.
  5. Повторите.

Есть три способа решить эту проблему:

  1. Измените changeHeaderOn = 160; на changeHeaderOn = 200; (все еще будет состояние "переключения", но оно будет менее вероятным.)
  2. Добавить заполнитель, чтобы не изменять высоту страницы (не проверено) 

var cbpAnimatedHeader = (function() {

  var docElem = document.documentElement,
    didScroll = false,
    changeHeaderOn = 160;

  function init() {
    window.addEventListener('scroll', function(event) {
      if (!didScroll) {
        didScroll = true;
        setTimeout(scrollPage, 250);
      }
    }, false);
  }

  function scrollPage() {
    var sy = scrollY(),
      $header = $('body > header');
    if (sy >= changeHeaderOn) {

      // Add space where the header used to be
      var $headerPlaceholder = $('<div class="js-header-placeholder">').height($header.outerHeight);
      $header.before($headerPlaceholder)

      // Now let the header become sticky
      $header.addClass('header--sticky');
    } else {
      $header.removeClass('header--sticky');
      $('.js-header-placeholder').remove();
    }
    didScroll = false;
  }

  function scrollY() {
    return window.pageYOffset || docElem.scrollTop;
  }

  init();

})();
  1. Добавить отступ сверху, чтобы не изменять высоту страницы (не проверено) 

var cbpAnimatedHeader = (function() {

  var docElem = document.documentElement,
    didScroll = false,
    changeHeaderOn = 160;

  function init() {
    window.addEventListener('scroll', function(event) {
      if (!didScroll) {
        didScroll = true;
        setTimeout(scrollPage, 250);
      }
    }, false);
  }

  function scrollPage() {
    var sy = scrollY(),
      $header = $('body > header');
    if (sy >= changeHeaderOn) {

      // Add space where the header used to be
      $('body').css('padding-top', $header.outerHeight);

      // Now let the header become sticky
      $header.addClass('header--sticky');
    } else {
      $header.removeClass('header--sticky');
      
      $('body').css('padding-top', '');
    }
    didScroll = false;
  }

  function scrollY() {
    return window.pageYOffset || docElem.scrollTop;
  }

  init();

})();
...