Farzad Bayan Farzad Bayan - 5 months ago 22
CSS Question

Add a class to a DIV when top of the window reach a specific element and remove it when not

I have a

.navigation
in the top of the wrapper.
I want to add it a
.fixed
class, when the top of the window reached the
.bottom
DIV & remove this class when the top of the
.bottom
is in the window`s scope (it's a toggling between add and remove .fixed class).

add fixed class to the navigation

<div id="wrapper">
<div class="navigation">
<!-- There are some list elements here -->
</div>
<div class="bottom"></div>
</div>


It's what I made, but not work

bottom = $('.bottom');
$(window).scroll(function(){
if ($(this).scrollTop() > bottom){
$('.navigation').addClass('fixed');
}
else{
$('.navigation').removeClass('fixed');
}
});

Answer

var bottom = $('.bottom').offset().top;

That should do it.

This compares the offset from the top of the viewport to the window's scrollTop() instead of comparing a whole element.