CODEWITHSUNDEEP
jquery
Man Mann
Man Mann

Reputation: 423

Div scroll down with the windows scroll

I need to make the right div menu of my website to scroll down to stuck with the user eyes with jquery.

here is my code but the 

    jQuery("body").scroll(function(){
jQuery("#scroll").animate({
               marginTop: jQuery(window).offset()}, 1500 );
            });

you can check the right menu from the link below http://gridberry.com/clients/tlgcenter/node/87

Upvotes: 0

Views: 454

Answers (2)

Daniel
Daniel

Reputation: 4946

Will this help you wrap your mind around it ...

edit

An upgraded version that calls a function for animation to take out choppy behaviour in IE.

function animateMenu(pos) {
    $("#sticky").stop(true, false).animate({
        marginTop: pos
    }, 500);
}

var offset = $("#sticky").offset().top;
$(window).scroll(function () {
    console.log($(window).scrollTop());
    if ($(window).scrollTop() > offset) {
        animateMenu($(window).scrollTop());
    }
})

previous fiddle: http://jsfiddle.net/djwave28/eFCpc/1/

new fiddle: http://jsfiddle.net/djwave28/eFCpc/2/

Upvotes: 1

Tushar Gupta - curioustushar
Tushar Gupta - curioustushar

Reputation: 57095

HTML

<div id="follow">
    <p>This element will follow all the way down to page</p>
    <p></p>
</div>

jQuery

$(document).ready(function () {
    var speed = 1000;
    var current_top = parseInt($('#follow').css('top'));
    $(window).scroll(function () {
        var top = $(window).scrollTop();
        $('#follow').css('top', top + current_top);
    });
});

CSS

#follow {
    position:absolute;
    left:10px;
    top:10px;
    height:50px;
    width:100%;
    background-color:#f0f0f0;
    border:1px solid #404040;
    padding:8px;
}

Working Demo http://jsfiddle.net/cse_tushar/YpHxd/

Upvotes: 2

Related Questions