Mindfuc Mindfuc - 15 days ago 13
jQuery Question

Adding class to fixed element, when he is touching footer

i have small problem with this one. I want to hide element x when it touch footer, it works (it completely invisible when touches footer) but somehow when im scrolling it adds every second pixel class "hidden" and then removes it. In effect its flashing when scrolling above footer. How can i fix it?

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

Answer

First, fix your JS:

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

You have to check outerHeight of your fixed element, not this (= window).

And your flashing problem - if you hide element by display: none CSS, it will have height 0px for jQuery, so use visibility: hidden; instead.

Check this JSFiddle