2012-01-09 13 views
0

DIV要素の位置を固定するサンプルHTMLコードを以下に示します。さて、私はスクロールを開始したら、 "setupBar"を(0、0)の位置(またはスクロール位置がどこにあるかに基づいて適切な位置)に移動できるようにする必要があります。ページのスクロール時にDIV要素を先頭に移動/修正するには

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=us-ascii"> 
</head> 
<body> 
<div id="mainBar" style="height:20px; border:1px solid red"></div> 
<div id="setupBar" style="position:fixed; border:1px solid blue; height:20px; width:100%"></div> 
<div style="height:1500px; background-color:#CCCCCC"></div> 
</body> 
</html> 

PS:私は現在のスクロール位置(ないCSSの修正)に応じて、上下にDIVを移動することができますJSソリューションを探しています:)

+0

なぜ私はあなたが単にポジションを使用したくないのか不思議です。 CSSのスタイル定義はこれを行うには?それはjsよりもクリーンなソリューションのようです。 – Evert

+0

重複:http://stackoverflow.com/q/7735002/681807 –

+0

CSSはこの目的にはより良いです – Bernat

答えて

1

は、あなたはこのhttp://jsfiddle.net/Kr4TJ/4/

は私が文書をスクロールするときmainBarそれが自然休耕にするためにabsolutesetupBar位置を設定します。 mainBarがもう見えない場合、setupBarの位置はfixedtopの距離を0pxに設定します。 mainBarが再び見える場合、setupBarの位置はabsoluteに戻り、自然な位置に戻るstyle.top=""に設定されます。

+0

はい、ありがとうございました:) – user1018482

+0

良いもの...少し微調整しなければならなかった.... – Grim

0

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=us-ascii"> 
<script type="text/javascript"> 
function $(obj) 
{ 
    return document.getElementById(obj); 
} 
function fixSetupBar() 
{ 
    $("setupBar").style.top=(document.body.scrollTop)+"px"; 
    $("setupBar").style.left=(document.body.scrollLeft)+"px"; 
} 
</script> 
</head> 
<body onscroll="fixSetupBar()"> 
<div id="mainBar" style="height:20px; border:1px solid red"></div> 
<div id="setupBar" style="position:absolute;top:0px;left:0px;border:1px solid blue; height:20px; width:100%"></div> 
<div style="height:1500px; background-color:#CCCCCC"></div> 
</body> 
</html> 
このソリューションをお試しください

これが役に立ちます。私が思う

関連する問題