ページにヘッダー div があり、ページがヘッダー領域までスクロールされると、上部に固定されます (position:'fixed' および top:0 を介して)。その下では、位置属性が変更された後に上に移動し、ヘッダー div が占めていたスペースを埋めます。位置が固定に変更されると、ヘッダーの下のコンテンツが上にスライドしないように修正する方法を知っている人はいますか?
前もって感謝します！！以下は私が使用しているコードで、JQuery を使用してヘッダーをピン留めします。
<html>
<頭>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<style type="text/css">
.para {
背景色:黄色;
}
.ピン留め {
背景色:#0000FF;
}
#pinHeader.fixed {
位置: 固定;
上: 0;
幅:100%;
}
</style>
</head>
<本体>
<div>
<div>
<h1>ナビはこちら</h1>
</div>
<div>
<div id="pinHeader" クラス="固定">
<h1> メイン ヘッダー </h1>
<h2>ここにサブヘッダーが入ります</h2>
<hr />
</div>
</div>
<!-- ここに主な内容が入ります -->
<div id="mainContent">
<h2>コンテンツ 1</h2>
<p class="para">何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか<br />
何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか<br />
何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか<br />
何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか<br />
何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか<br />
何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか<br />
何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか<br />
何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか<br />
何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか<br />
何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか<br />
何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか<br />
</p>
<h2>コンテンツ 2</h2>
<p class="para">何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか<br />
何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか<br />
何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか<br />
何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか<br />
何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか<br />
何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか<br />
何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか<br />
何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか<br />
何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか<br />
何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか<br />
何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか<br />
</p>
<h2>コンテンツ 3</h2>
<p class="para">何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか<br />
何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか<br />
何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか<br />
何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか<br />
何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか<br />
何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか<br />
何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか<br />
何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか<br />
何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか<br />
何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか<br />
何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか<br />
</p>
<h2>コンテンツ 4</h2>
<p class="para">何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか<br />
何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか<br />
何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか<br />
何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか<br />
何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか<br />
何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか<br />
何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか<br />
何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか<br />
何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか<br />
何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか<br />
何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか何とか<br />
</p>
</div>
</div>
<script type="text/javascript">
var divTop = null;
jQuery(ドキュメント).ready(関数(){
jQuery(window).scroll(関数() {
pinnedPanel();
});
jQuery(window).resize(関数() {
pinnedPanel();
});
divTop = jQuery('#pinHeader').offset().top;
});
var pinned = false;
関数 pinnedPanel() {
var stickHeader = jQuery('#pinHeader');
var contentDiv = jQuery('#mainContent');
// スクロールの y 位置は何か
var y = jQuery(window).scrollTop();
if (y >= divTop) {
stickHeader.addClass('fixed');
ピン留め = true;
} その他の場合 (固定) {
stickHeader.removeClass('fixed');
ピン留め = false;
}
}
</script>
</body>
</html>