1
我的頁面上有一個頁面div，當頁面向下滾動到頁眉區域時，它被固定在頂部（通過position：'fixed'和top：0），但是問題在於位置屬性發生變化後，位於其下方的內容div會移動，從而填充標題div用來佔用的空間。有誰知道如何解決這個問題，以便頭部下方的內容不會向上滑動，一旦位置更改爲固定？固定頁眉的div有問題
在此先感謝！下面是我使用它使用jQuery來腳頭的代碼，：
<html>
<head>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<style type="text/css">
.para {
background-color:yellow;
}
.pinned {
background-color:#0000FF;
}
#pinHeader.fixed {
position: fixed;
top: 0;
width:100%;
}
</style>
</head>
<body>
<div>
<div>
<h1>Nav goes here</h1>
</div>
<div>
<div id="pinHeader" class="pinned">
<h1> Main Header </h1>
<h2>Sub header goes here</h2>
<hr />
</div>
</div>
<!-- main content goes here -->
<div id="mainContent">
<h2>Content 1</h2>
<p class="para">blah blah blah blah blah blah blah blah blah blah blah blah blah blah<br />
blah blah blah blah blah blah blah blah blah blah blah blah blah blah <br />
blah blah blah blah blah blah blah blah blah blah blah blah blah blah <br />
blah blah blah blah blah blah blah blah blah blah blah blah blah blah <br />
blah blah blah blah blah blah blah blah blah blah blah blah blah blah <br />
blah blah blah blah blah blah blah blah blah blah blah blah blah blah <br />
blah blah blah blah blah blah blah blah blah blah blah blah blah blah <br />
blah blah blah blah blah blah blah blah blah blah blah blah blah blah <br />
blah blah blah blah blah blah blah blah blah blah blah blah blah blah <br />
blah blah blah blah blah blah blah blah blah blah blah blah blah blah <br />
blah blah blah blah blah blah blah blah blah blah blah blah blah blah <br />
</p>
<h2>Content 2</h2>
<p class="para">blah blah blah blah blah blah blah blah blah blah blah blah blah blah<br />
blah blah blah blah blah blah blah blah blah blah blah blah blah blah <br />
blah blah blah blah blah blah blah blah blah blah blah blah blah blah <br />
blah blah blah blah blah blah blah blah blah blah blah blah blah blah <br />
blah blah blah blah blah blah blah blah blah blah blah blah blah blah <br />
blah blah blah blah blah blah blah blah blah blah blah blah blah blah <br />
blah blah blah blah blah blah blah blah blah blah blah blah blah blah <br />
blah blah blah blah blah blah blah blah blah blah blah blah blah blah <br />
blah blah blah blah blah blah blah blah blah blah blah blah blah blah <br />
blah blah blah blah blah blah blah blah blah blah blah blah blah blah <br />
blah blah blah blah blah blah blah blah blah blah blah blah blah blah <br />
</p>
<h2>Content 3</h2>
<p class="para">blah blah blah blah blah blah blah blah blah blah blah blah blah blah<br />
blah blah blah blah blah blah blah blah blah blah blah blah blah blah <br />
blah blah blah blah blah blah blah blah blah blah blah blah blah blah <br />
blah blah blah blah blah blah blah blah blah blah blah blah blah blah <br />
blah blah blah blah blah blah blah blah blah blah blah blah blah blah <br />
blah blah blah blah blah blah blah blah blah blah blah blah blah blah <br />
blah blah blah blah blah blah blah blah blah blah blah blah blah blah <br />
blah blah blah blah blah blah blah blah blah blah blah blah blah blah <br />
blah blah blah blah blah blah blah blah blah blah blah blah blah blah <br />
blah blah blah blah blah blah blah blah blah blah blah blah blah blah <br />
blah blah blah blah blah blah blah blah blah blah blah blah blah blah <br />
</p>
<h2>Content 4</h2>
<p class="para">blah blah blah blah blah blah blah blah blah blah blah blah blah blah<br />
blah blah blah blah blah blah blah blah blah blah blah blah blah blah <br />
blah blah blah blah blah blah blah blah blah blah blah blah blah blah <br />
blah blah blah blah blah blah blah blah blah blah blah blah blah blah <br />
blah blah blah blah blah blah blah blah blah blah blah blah blah blah <br />
blah blah blah blah blah blah blah blah blah blah blah blah blah blah <br />
blah blah blah blah blah blah blah blah blah blah blah blah blah blah <br />
blah blah blah blah blah blah blah blah blah blah blah blah blah blah <br />
blah blah blah blah blah blah blah blah blah blah blah blah blah blah <br />
blah blah blah blah blah blah blah blah blah blah blah blah blah blah <br />
blah blah blah blah blah blah blah blah blah blah blah blah blah blah <br />
</p>
</div>
</div>
<script type="text/javascript">
var divTop = null;
jQuery(document).ready(function(){
jQuery(window).scroll(function() {
pinnedPanel();
});
jQuery(window).resize(function() {
pinnedPanel();
});
divTop = jQuery('#pinHeader').offset().top;
});
var pinned = false;
function pinnedPanel() {
var stickHeader = jQuery('#pinHeader');
var contentDiv = jQuery('#mainContent');
// what the y position of the scroll is
var y = jQuery(window).scrollTop();
if (y >= divTop) {
stickHeader.addClass('fixed');
pinned = true;
} else if (pinned) {
stickHeader.removeClass('fixed');
pinned = false;
}
}
</script>
</body>
</html>
工程。非常感謝！！ – Steve 2012-04-23 12:28:26