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

``` It's what I made, but not work ``` bottom = $('.bottom'); $(window).scroll(function(){ if ($(this).scrollTop() > bottom){ $('.navigation').addClass('fixed'); } else{ $('.navigation').removeClass('fixed'); } }); ```

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

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

Solution

Problem