添加班级到固定元素，当他触摸页脚

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