滚动锚点未激活

Scroll anchor not activating

本文关键字：激活 滚动      更新时间：2023-09-26

当我滚动并且锚点接触到窗口顶部时，框的背景颜色应该会改变，但我似乎无法使其正常工作。

https://jsfiddle.net/6p2pnnq4/1/

    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");
  }
};
$(window).scroll(scrollFn);

您不需要

$(this).find

这是无用的，尝试以下操作：

var targetOffset = $('#footer_wrap').offset().top,
$window = $(window);
$(window).on( 'scroll', function(){
    if ( $window.scrollTop() >= targetOffset ) {
        $("#footer_wrap").addClass("topper");
    }else{
        $("#footer_wrap").removeClass("topper");
    }
});

和CSS

#footer_wrap {
  margin-top: 200px;
  height: 130vmax;
  background-color: #f4f4f4;
  -ms-transition: all 300ms ease-in-out;
  -webkit-transition: all 300ms ease-in-out;
  -moz-transition: all 300ms ease-in-out;
  -o-transition: all 300ms ease-in-out;
  transition: all 300ms ease-in-out;
}
#footer_wrap.topper {
  background-color: #000;
}

然后，当#footer_wrap位于顶部时，它将更改背景。

查看Fiddle

相关文章：