当锚点滚动到页面顶部时,我试图使背景颜色淡入淡出。

<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/

最佳答案

您的代码有一些问题:


您从未将滚动功能分配给窗口滚动事件
语法错误/不起作用(行:2和5)
您使用$(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;
}


工作提琴:https://jsfiddle.net/t6tyjbz5/5/

10-06 04:20
查看更多