根据 scroll 高度更換header menu 背景颜色,使用jquery + animation,但遇到问题

asys0512
  • 2.7k
$(window).scroll(function() {
  if ($(this).scrollTop() > 0) {
    $('.header-menu-layout').css('background-color', 'white');
    $('.header-menu-layout').animate({
      backgroundColor: 'white'
    }, 300);
  }

  if ($(this).scrollTop() == 0) {
    $('.header-menu-layout').css('background-color', 'transparent');
    $('.header-menu-layout').stop().animate({
      backgroundColor: 'transparent'
    }, 300);
  }
});

当高度大于1 px以上
会运行animate,背景变成白色这没问题
但发现一个致命问题
就是1px以上跟2px以上.....,他都会运行第一段fucntion
导致滚动事件必须停止时,他才会跑出动画效果!
因为你滚动一次就监听一次?
我参考的做法是
https://www.spectacles.com/
只是他的做法似乎不是这样?

评论
阅读 657
1 个回答
✓ 已被采纳

当Scroll发生过程中(还没停止),第一段function不断被执行,它的animation有300毫秒延迟,每一px的滚动都会让第一个function执行一遍,都会触发antmation,后一个animation的执行会让前一个animation执行终止。 当滚动停止后,最后一个animation才得以执行。

想要达成你的目的,可以简单的设置一个bool变量,滚动发生时判断是否为true,保证只执行一次。页面回归原位时,设置为false。

var isScrollAnimationFired = false;
$(window).scroll(function() {
  if ($(this).scrollTop() > 0) {
    $('.header-menu-layout').css('background-color', 'white');
    if(!isScrollAnimationFired) {
      $('.header-menu-layout').animate({
        backgroundColor: 'white'
      }, 300);
      isScrollAnimationFired = true;
    }
  }

  if ($(this).scrollTop() == 0) {
    $('.header-menu-layout').css('background-color', 'transparent');
    $('.header-menu-layout').stop().animate({
      backgroundColor: 'transparent'
    }, 300);
    isScrollAnimationFired = false;
  }
});
撰写回答

登录后参与交流、获取后续更新提醒

宣传栏