我的页面上有一个标题div，当页面向下滚动到标题区域时，它被固定在顶部（通过位置：'固定'，顶部：0），但问题是内容位于其下方的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>
答案 0 :(得分：1)
将stickHeader的高度添加到contentDiv的margin-top，并将其恢复为unpin之前的任何值（假设为零）。
if (y >= divTop) {
stickHeader.addClass('fixed');
contentDiv.css('margin-top', stickHeader.height())
pinned = true;
} else if (pinned) {
stickHeader.removeClass('fixed');
contentDiv.css('margin-top', 0)
pinned = false;
}
答案 1 :(得分：0)
尝试使用margin-top作为标题div ... try it..
答案 2 :(得分：0)
将导航栏固定在顶部或底部会导致分层，否则会避免。所以：如果你弄清楚酒吧占用的空间量，特别是高度......你要么从边缘顶部加上或减去这个差异。
如果您希望内容不会向标题顶部提升：
margin-top: -some px;
如果您希望内容向下移动页面：
margin-top: some px;