推回内容的固定元素答案

【问题标题】：Fixed element that pushes back content推回内容的固定元素
【发布时间】：2012-11-09 01:56:35
【问题描述】：

我正在寻找一种在页面顶部放置一个固定元素的方法，该元素会根据页面宽度改变高度，并且还会将下面的内容推回。到目前为止，我已经管理了一些事情，但我希望有一个更清洁的解决方案。我所做的是拥有两个具有相同内容的顶级元素。一个设置为固定位置，另一个设置为相对位置，但没有不透明度...

#top-1 { position: fixed; background-color:#fff}
#top-2 {position: relative; opacity:0;}
#content { background-color: #FFF; background-color:#CCC }

我在这里设置了一个例子http://jsfiddle.net/q3G7F/6/ 它完全按照我的需要工作，但也许有人有更好的主意？
谢谢，

【问题讨论】：

标签： css fixed

【解决方案1】：

你可以用一个小的 jQuery（或 javascript）sn-p 来做到这一点。
将 CSS 更改为：

#top-1 { position: fixed; top: 0; background-color:#fff}
#content { background-color: #FFF; background-color:#CCC }

在页面底部添加此脚本（需要 jQuery）。这应该为内容添加上边距并为您的顶部元素腾出空间。

<script>
    $(document).ready(function() {
       $('#content').css('margin-top', $('#top-1').height() + 'px');
    }); 
</script>

这是一个工作示例：http://jsfiddle.net/g6CnA/。

更新

您还需要监听窗口调整大小事件并在顶部元素的高度发生变化时调整边距。

$(document).ready(function() {
    $('#content').css('margin-top', $('#top-1').height() + 'px');   
}); 

$(window).resize(function() {
    $('#content').css('margin-top', $('#top-1').height() + 'px');        
});

jsFiddle：http://jsfiddle.net/g6CnA/1

【讨论】：

这就像一个魅力！非常感谢。该网站仍在开发中，但您可以在此处查看结果 www.lucieduval.com/section2/projet-1/
看起来不错。不过有一件事，我认为在使用 document ready 时，您不需要将此代码放入 window load 事件中。它们具有相同的目的。窗口加载事件稍后执行。
这是#menu，而不是您页面上的#top-1 ;)
你完全正确。我将源代码 jsfiddle 结果框复制到窗口...我应该复制您的代码...
是的，我想通了……我不是程序员，菜鸟的错误；）

【解决方案2】：

在您的 CSS 中，如果您在 #top-1 和 #content 的父元素上设置显式高度（以 px 或任何非 % 为单位），您应该能够设置 @987654324 的 height @ 和#content 的margin-top 到相同的百分比。这将为您提供所需的行为，但此特定方法只有在您可以显式设置其父级的高度时才有效。

【讨论】：