CODEWITHSUNDEEP
jquery
Ank Pro
Ank Pro

Reputation: 9

Get the position of div on page scroll in jquery

I'm stuck at the point to fix the position of the my menu div that is in the center of the page or sometime on the top that depends on the content. i wanna to fix the position of the div when i scroll the page so that It display in the top of the page(even it is in center or top or bottom).Please let me know how can i get the position of the div and apply the css position fixed when it reach on the top of the page using the jquery. for example http://new.livestream.com/live-video-tools

Upvotes: 0

Views: 145

Answers (1)

nicolas
nicolas

Reputation: 719

I made a try : see JsFiddle

Thing is to change the css attribute of the containers that need to be fixed once scroll reach it :

$(document).ready(function(){
    var iMenuTop = $('.menu').offset().top;
    $(window).scroll(function(){
        var iWinTop = $(this).scrollTop();
        if(iWinTop >= iMenuTop)
            $('.menu').css({
                position:'fixed',
                top:0});
        else
            $('.menu').css('position','static');         
    });
});

Working with Firefox, not sur for the others...

Edit : it's really a draft, you might have to adapt e.g. if with there is already a scroll when loading, which can occur by using browser back button.

Upvotes: 1

Related Questions