CODEWITHSUNDEEP
jquerycss
Michael Rader
Michael Rader

Reputation: 5957

How to keep object on page scrolling with the top of the page

I am having trouble following this stackOverflow Q&A:

Fix object to top of browser window when scrolling

I have applied it to this this page

Why is my object not attaching to the top like it should and then being replaced properly when the page is scrolled back to the top?

My jQuery:

$(window).scroll(function () {
    if ($(window).scrollTop() > 200) {
        $('#contentNavigation').css('top', $(window).scrollTop());
    }
}
);

Upvotes: 3

Views: 1921

Answers (2)

Mike Legacy
Mike Legacy

Reputation: 1066

http://jsfiddle.net/mikelegacy/tXBHT/

Please re-review this. Here is what you want.

Upvotes: 4

Chris Carew
Chris Carew

Reputation: 1418

Edit: This is a much better method of solving the problem, use position fixed when necessary and leave your css alone.

Replace your javascript with this: 

$(window).scroll(function () {    
if ($(window).scrollTop() > 200) {
    $('#contentNavigation').css('position', 'fixed').css('top','0px');    }
else { 
    $('#contentNavigation').css('position', 'relative').css('top','0px');
}});

Upvotes: 1

Related Questions