固定标题部分的CSS问题 [英] CSS Trouble with Pinned Header Div
本文介绍了固定标题部分的CSS问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我的页面上有一个标题div，当页面向下滚动到标题区域时，它被固定在顶部（通过position：'fixed'和top：0），但问题在于内容在位置属性发生变化后，位于其下的div最终会移位，填充标题div用来占用的空间。有谁知道如何解决这个问题，以便头部下方的内容一旦位置改为固定不会滑动？
预先感谢！下面是我使用的代码，它使用JQuery来固定标题：
< html>
< head>
< script type =text / javascriptsrc =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;
宽度：100％;
}
< / style>
< / head>
< body>
< div>
< div>
< h1> Nav去这里< / h1>
< / div>
< div>
< div id =pinHeaderclass =pinned>
< h1>主标题< / h1>
< h2>小标题出现在这里< / h2>
< hr />
< / div>
< / div>
<！ - 主要内容在这里 - >
< div id =mainContent>
< h2>内容1< / h2>
< p class =para>等等等等等等等等等等等等等等等等等等等等等等等等等等等等。
等等等等等等等等等等等等等等等等等等等等等等等等等等等等。
等等等等等等等等等等等等等等等等等等等等等等等等等等等等。
等等等等等等等等等等等等等等等等等等等等等等等等等等等等。
等等等等等等等等等等等等等等等等等等等等等等等等等等等等。
等等等等等等等等等等等等等等等等等等等等等等等等等等等等。
等等等等等等等等等等等等等等等等等等等等等等等等等等等等。
等等等等等等等等等等等等等等等等等等等等等等等等等等等等。
等等等等等等等等等等等等等等等等等等等等等等等等等等等等。
等等等等等等等等等等等等等等等等等等等等等等等等等等等等。
等等等等等等等等等等等等等等等等等等等等等等等等等等等等。
< / p>
< h2>内容2< / h2>
< p class =para>等等等等等等等等等等等等等等等等等等等等等等等等等等等等。
等等等等等等等等等等等等等等等等等等等等等等等等等等等等。
等等等等等等等等等等等等等等等等等等等等等等等等等等等等。
等等等等等等等等等等等等等等等等等等等等等等等等等等等等。
等等等等等等等等等等等等等等等等等等等等等等等等等等等等。
等等等等等等等等等等等等等等等等等等等等等等等等等等等等。
等等等等等等等等等等等等等等等等等等等等等等等等等等等等。
等等等等等等等等等等等等等等等等等等等等等等等等等等等等。
等等等等等等等等等等等等等等等等等等等等等等等等等等等等。
等等等等等等等等等等等等等等等等等等等等等等等等等等等等。
等等等等等等等等等等等等等等等等等等等等等等等等等等等等。
< / p>
< h2>内容3< / h2>
< p class =para>等等等等等等等等等等等等等等等等等等等等等等等等等等等等。
等等等等等等等等等等等等等等等等等等等等等等等等等等等等。
等等等等等等等等等等等等等等等等等等等等等等等等等等等等。
等等等等等等等等等等等等等等等等等等等等等等等等等等等等。
等等等等等等等等等等等等等等等等等等等等等等等等等等等等。
等等等等等等等等等等等等等等等等等等等等等等等等等等等等。
等等等等等等等等等等等等等等等等等等等等等等等等等等等等。
等等等等等等等等等等等等等等等等等等等等等等等等等等等等。
等等等等等等等等等等等等等等等等等等等等等等等等等等等等。
等等等等等等等等等等等等等等等等等等等等等等等等等等等等。
等等等等等等等等等等等等等等等等等等等等等等等等等等等等。
< / p>
< h2>内容4< / h2>
< p class =para>等等等等等等等等等等等等等等等等等等等等等等等等等等等等。
等等等等等等等等等等等等等等等等等等等等等等等等等等等等。
等等等等等等等等等等等等等等等等等等等等等等等等等等等等。
等等等等等等等等等等等等等等等等等等等等等等等等等等等等。
等等等等等等等等等等等等等等等等等等等等等等等等等等等等。
等等等等等等等等等等等等等等等等等等等等等等等等等等等等。
等等等等等等等等等等等等等等等等等等等等等等等等等等等等。
等等等等等等等等等等等等等等等等等等等等等等等等等等等等。
等等等等等等等等等等等等等等等等等等等等等等等等等等等等。
等等等等等等等等等等等等等等等等等等等等等等等等等等等等。
等等等等等等等等等等等等等等等等等等等等等等等等等等等等。
< / 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;
函数pinnedPanel（）{
var stickHeader = jQuery（'＃pinHeader'）;
var contentDiv = jQuery（'＃mainContent'）;
//滚动的y位置是
var y = jQuery（window）.scrollTop（）;
if（y> = divTop）{
stickHeader.addClass（'fixed'）;
pinned = true;
} else if（pinned）{
stickHeader.removeClass（'fixed'）;
pinned = false;
}
}
< / script>
< / body>
< / html>
解决方案
将stickHeader的高度添加到contentDiv的margin-top，并将其恢复回到之前的任何情况（假设为零）。
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;
}
I have a header div on my page that when the page is scrolled down to the header area, it is pinned at the top (via position:'fixed', and top:0), but the problem is that the content div that sits below it ends up shifting up after the position attribute is changed, filling the space that the header div used to take up. Does anyone know how to fix it so that the content below the header doesn't slide up once the position is changed to fixed?
Thanks in advance!! Below is the code that I am using, which uses JQuery to pin the header:
<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>
解决方案
Add height of stickHeader to margin-top of contentDiv, and revert it back to whatever it was before (assuming zero here) on 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;
}
这篇关于固定标题部分的CSS问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
