滾動錨點未激活

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