添加班級到固定元素，當他觸摸頁腳

Question

我有這個小問題。我想隱藏元素x當它觸摸頁腳，它的作品（它觸摸頁腳時它是完全不可見的），但不知何故，當我滾動它添加每個第二個像素類「隱藏」，然後將其刪除。實際上它在頁腳上方滾動時閃爍。我該如何解決它？

$(window).scroll(function() { 
    if($(".x").offset().top + $(this).outerHeight() > $('.footer-home').offset().top) { 
     $(".x").addClass('hidden'); 
    } else { 
     $(".x").removeClass('hidden'); 
    } 
}); 

Answer 1

首先，解決您的JS：

if ($('.x').offset().top + $('.x').outerHeight() > $('.footer-home').offset().top) { ... } else { ... } 

你必須檢查你的固定元素的outerHeight，不是這個（=窗口）。

而你的閃爍的問題 - 如果你通過顯示隱藏元素：無CSS，jQuery的高度爲0px，所以使用visibility：hidden;代替。

檢查此JSFiddle

Answer 2

當你使用多個元素，你需要逐個檢查每個元素的offset()和切換hidden類按條件。

$(window).scroll(function() { 
    var windowOuterHeight = $(this).outerHeight(); 
    var footerOffSetTop = $('.footer-home').offset().top; 

    //Iterate x elements 
    $(".x").each(function(){ 

     //Cache variables 
     var self = $(this); 

     //add/remove class based on state 
     self.toggleClass('hidden', (self.offset().top + windowOuterHeight) >= footerOffSetTop); 
    }); 
});