我的页面上有一个标题 div，当页面向下滚动到标题区域时，它被固定在顶部（通过位置：'fixed' 和顶部：0），但问题是内容 div在位置属性更改后，它下面最终会向上移动，填充标题 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" class="pinned">
<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 div 顶部 = 空；
jQuery(文档).ready(函数(){
jQuery（窗口）.scroll（函数（）{
固定面板（）；
});
jQuery(窗口).resize(函数() {
固定面板（）；
});
divTop = jQuery('#pinHeader').offset().top;
});
var pinned = false;
函数 pinnedPanel() {
var stickHeader = jQuery('#pinHeader');
var contentDiv = jQuery('#mainContent');
// 滚动条的 y 位置是多少
var y = jQuery(window).scrollTop();
如果（y >= divTop）{
stickHeader.addClass('fixed');
固定=真；
} 否则如果（固定）{
stickHeader.removeClass('fixed');
固定=假；
}
}
</脚本>
</正文>
</html>