Mindfuc Mindfuc - 1 year ago 111
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) {
} else {

Answer Source

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download