在滚动上弹跳的粘性标题动画

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. 该页面向下滚动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();

})();