滚动锚未激活

Question

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

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);

Answer 1

您不需要

$(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