修复了推回内容的元素

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

#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/ http://jsfiddle.net/q3G7F/6/它完全按照我需要的方式工作，但也许有人有更好的主意？
谢谢，

您可以使用一个小的 jQuery（或 javascript）片段来完成此操作。
将 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/ http://jsfiddle.net/g6CnA/ .

Update

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

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

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

​

js小提琴：http://jsfiddle.net/g6CnA/1 http://jsfiddle.net/g6CnA/1