滚动滚动时出现的粘滞头动画

Question

我正在使用On-Scroll Animate Header from 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/上找到有效的演示

Answer 1

问题在于页眉变得发粘，页眉不再包含在页面高度中并且不再向下滚动160个像素时。这是逐步出现的问题。

1. 页面向下滚动200像素
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();

})();