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

Question

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).

<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 1

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.