当锚点滚动到页面顶部时,我试图使背景颜色淡入淡出。
<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/