javascript - 当 anchor 到达页面顶部时，获取 div 的背景颜色以淡入不同的颜色

Question

当 anchor 滚动到页面顶部时，我试图让背景颜色淡化。

<div id="footer_wrap">
<div class="anchor-point"> </div>

#footer_wrap {
margin-top: 200px;
height: 130vmax;
background-color: #f4f4f4;
opacity: 1;
transition-delay: 0s;
transition: ease-in-out .3s
}

#footer_wrap.topper {
transition: visibility 0s ease-in-out 0.3s, opacity 0.3s ease-in-out;
opacity: 0;
background-color: #000;
visibility: hidden
}


var scrollFn = function() {
var targetOffset = $(this).find(".anchor-point")[0].offsetTop;
console.log('Scrolling...');
if ($(this).scrollTop() > targetOffset) {
$(this).find(".#footer_wrap").addClass("topper");
} else {
$(this).find("#footer_wrap").removeClass("topper");
}
};

https://jsfiddle.net/t6tyjbz5/

Answer 1

您的代码有一些问题:

1. 您从未将滚动功能分配给窗口滚动事件
2. 语法错误/非函数(第 2 和 5 行)
3. 您使用 $(this) 的方式不正确。事实上，$(this) 永远不会被设置，因为它没有被分配，当它被分配时，它会引用窗口。

更正的 Javascript:

function scrollFn() {

  var targetOffset = $(".anchor-point").offset().top;
  var w = $(window).scrollTop();

  if (w > targetOffset) {
    $("#footer_wrap").addClass("topper");
  } else {
    $("#footer_wrap").removeClass("topper");
  }
};
$(window).on('scroll', scrollFn);

此外，如果您想更改背景颜色，CSS 会简单得多:

#footer_wrap {
  margin-top: 200px;
  height: 130vmax;
  background-color: #f4f4f4;
  transition: background 0.3s ease-in-out ;
}
#footer_wrap.topper {
  background-color: #a0a0a0;
}

工作 fiddle :https://jsfiddle.net/t6tyjbz5/5/