刻薄的标题动画在滚动时弹跳

Question

我正在使用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();
})();

，代码通常可以正常工作，但是，当我从顶部位置滚动一个"单击"（页面加载默认）时，标头似乎坐在limbo中，并在添加和删除之间来回弹跳我的课。有人对我需要做出的更改有什么建议才能使其正常工作？

可以在www.linkup.co.nz/preview/

Answer 1

问题是，当标头变得粘时，标头不再包含在页面高度中，并且不再滚动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();
})();

3. 在顶部添加填充以不更改页面的高度（未经测试）

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();
})();