固定推送内容的元素

Question

我正在寻找一种方法，有一个固定的元素在页面的顶部，这将改变高度根据页面宽度，这也将推回内容以下。到目前为止，我已经做了一些事情，但我希望有一个更干净的解决方案。我所做的是有2个相同内容的顶级元素。一个设置为固定位置，另一个设置为相对，但没有不透明度...

#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/它完全按照我想要的方式工作，但也许有人有更好的想法？

谢谢,

Answer 1

您可以使用一个小的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/。

更新

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

$(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

Answer 2

在CSS中，如果你在#top-1和#content的父元素上设置了一个显式的高度( px或其他值)，你应该能够将#top-1的height和#content的margin-top设置为相同的百分比。这将为您提供所需的行为，但只有当您可以显式设置其父对象的高度时，此特定方法才会起作用。