CODEWITHSUNDEEP
jquerysticky
MPR
MPR

Reputation: 11

jQuery scrolling div top

I've got a div that scrolls with the page after it clears the header section. Seems to work fine, but when scrolling back to the top, it won't go back to the exact spot that it started at when he page loaded.

Script:

$(document).ready(function() {
$(window).scroll(function() {
    if ($(window).scrollTop() > 266) {
        var $myDiv = $("#scrollingNavigation");
        $myDiv.stop();
        $myDiv.animate({ marginTop: ($(window).scrollTop()) - 266 });
    }
    else {
        ($(window).scrollTop() - 266);
    }
});
});

HTML:

<div id="scrollingNavigation">My content and image here</div>

Example: http://jsfiddle.net/masada/zZgcG/4/

Try scrolling the window slowly, and it will leave only about 8-10px from the top. Scroll fast and the div will rest back at the top at all different kinds of space from the top. Rather confusing.

Upvotes: 1

Views: 653

Answers (1)

ashwinik001
ashwinik001

Reputation: 5163

a little change to your code..

$(document).ready(function() {
    $(window).scroll(function() {
        var $myDiv = $("#scrollingNavigation");
        if ($(window).scrollTop() > 50) {
            $myDiv.stop();
            $myDiv.animate({ marginTop: ($(window).scrollTop()) + 50 });
        }
        else {
            $myDiv.stop();
            $myDiv.css({ marginTop: 0 });
        }
    });
});

please find working demo here "http://jsfiddle.net/zZgcG/10/".

Upvotes: 1

Related Questions