adjust div position according to window scroll bar movement

my page content is big and there is a link. when user mouse over the link then a div is popup but when i scroll the browser window then div position should change when it appears. how to write and show the div by jquery in such a way that d开发者_如何学Goiv should open and adjust position when user drag the scroll bar top & down. please advice how to do it very simply.

hey, you can use pure CSS e.g. position:fixed;top:30px;left:30px;z-index:100;

second jQuery solution:

CSS:

<style type="text/css">
#mainmenu{position:absolute;left:30px;top:30px;z-index:100;}
#content{height:2000px;}
</style>

jQuery

<script type="text/javascript">
$(function(){
    $(window).scroll(function(){
        $('#mainmenu').animate({top:$(window).scrollTop()+30},500);
    });
});
</script>

HTML:

<div id="mainmenu">
<ul>
<li><a href="">link 1</a></li>
<li><a href="">link 2</a></li>
<li><a href="">link 3</a></li>
<li><a href="">link 4</a></li>
</ul>
</div>
<div id="content">
</div>

Cheers

G.

You could use jquery's scroll to track for when the user scrolls ie:

$(window).scroll(function () { 
     $("#divId").offset({ left: left, top: top});

});

EDIT:

Also have a look at this blog entry

$(window).scroll(function () {  
    var windowWidth = document.documentElement.clientWidth;
    var windowHeight = document.documentElement.clientHeight;

    var divWidth = windowWidth * 0.7;
    var divHeight = windowHeight * 0.7;

    $("#divPopup").width(divWidth);
    $("#divPopup").height(divHeight);

    var popupWidth = $("#divPopup").width();
    var popupHeight = $("#divPopup").height();

    $("#divPopup").css({
        "position": "absolute",
        "top": (windowHeight / 2 - popupHeight / 2) + $(window).scrollTop(),
        "left": windowWidth / 2 - popupWidth / 2
    });
});