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');
    }
});

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');
    }
});

• javascript
• jquery
• html
• css

• 1 Visualising your requirement is nice, But where's your code.? – Rajaprabhu Aravindasamy Commented Dec 1, 2013 at 15:58
• How is the .navigation being scrolled? – acdcjunior Commented Dec 1, 2013 at 16:06
• @acdcjunior It's scrolled with the default browser scroller – Farzad Bayan Commented Dec 1, 2013 at 16:11

1 Answer 1

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

That should do it.

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