Sticky Header 动画在滚动条上弹跳

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

})();

代码总体上运行良好，但是，当我从顶部位置（页面加载默认值）在鼠标上滚动一个 "click" 时，header 似乎处于不确定状态并弹跳在添加和删除我拥有的 class 之间来回切换。有人对我需要进行哪些更改才能使其正常工作有任何建议吗？

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

找到工作演示

Answer 1

问题是当header变粘时，header不再包含在页面高度中，也不再向下滚动160像素。这是一步一步的问题。

页面向下滚动200px
header 变粘，其高度从页面中减去。
页面现在只向下滚动了 141 像素。
header 变得不粘。
重复。

解决这个问题的方法有以下三种：

将changeHeaderOn = 160;更改为changeHeaderOn = 200;（仍然会有"switchy"状态，但不太可能发生。）
添加占位符以不更改页面高度（未测试）

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

})();

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

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

})();

Sticky Header 动画在滚动条上弹跳

Sticky Header Animation Bouncing on Scroll

css

jquery

sticky