ウィンドウスクロールバーの移動に従ってdiv位置を調整します。

Question

マイページの内容が大きく、リンクがあります。リンク上でユーザーのマウスをクリックすると、divがポップアップ表示されますが、ブラウザウィンドウをスクロールすると、表示されるときにdivの位置が変更されます。 divをスクロールバーの上にドラッグして位置を調整して調整するような方法でdivを表示して表示する方法&非常に簡単に行う方法をアドバイスしてください。

Answer 1

あなたは、ユーザーがスクロールは、IEときのために追跡するために、jQueryのスクロールを使用することができます。

は

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

}); 

EDIT：

はまた、あなたは、例えば、純粋なCSSを使用することができ、このblog entry

Answer 2

ちょっと見てみましょうposition:fixed;top:30px;left:30px;z-index:100;

二jQueryのソリューション：

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> 

乾杯

G.

Answer 3

$(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 
    }); 
});