【问题标题】：CSS Trouble with Pinned Header Div固定标题 Div 的 CSS 问题
【发布时间】：2012-05-03 16:18:30
【问题描述】：

我的页面上有一个标题 div，当页面向下滚动到标题区域时，它被固定在顶部（通过位置：'固定'和顶部：0），但问题是内容位于其下方的 div 在位置属性更改后最终会向上移动，填充标题 div 曾经占用的空间。有谁知道如何修复它，以便一旦位置更改为固定，标题下方的内容就不会向上滑动？

提前致谢！！下面是我正在使用的代码，它使用 JQuery 来固定标题：

导航到这里

主标题

子标题放在这里

内容 1

哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
呜呜呜呜呜呜呜呜呜呜呜
呜呜呜呜呜呜呜呜呜呜呜
呜呜呜呜呜呜呜呜呜呜呜
呜呜呜呜呜呜呜呜呜呜呜
呜呜呜呜呜呜呜呜呜呜呜
呜呜呜呜呜呜呜呜呜呜呜
呜呜呜呜呜呜呜呜呜呜呜
呜呜呜呜呜呜呜呜呜呜呜
呜呜呜呜呜呜呜呜呜呜呜
呜呜呜呜呜呜呜呜呜呜呜

内容 2

内容 3

内容 4

标签： javascript jquery html css

【解决方案1】：

将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;

}

【讨论】：

【解决方案2】：

尝试对标题 div 使用 margin-top...try it..

【讨论】：

【解决方案3】：

将导航栏固定在顶部或底部会导致您避免分层。所以：如果您计算出条形占用的空间量，特别是高度.. 并且您可以从边距顶部添加或减去该差异。

如果您不希望内容向上顶到顶部：

margin-top: -some px;

如果你想让内容在页面下移：

margin-top: some px;

【讨论】：