固定元素，推回内容 [英] Fixed element that pushes back content

问题描述

我寻找一种方法，在页面的顶部有一个固定的元素，将根据页面宽度改变的高度，也将推回内容下面。我管理了一些东西，但我希望一个更清洁的解决方案。
我做的是有2个顶级元素具有相同的内容。
一个设置为位置固定，另一个设置为相对，但没有不透明度...

I a looking for a way to have a fixed element at the top of the page that would change in height according to the page width and that would also push back the content bellow. I've managed something so far but I'm hoping for a much cleaner solution. What I did is to have 2 top elements with the same content. One is set to position fixed, and the other one to relative, but with no opacity ...

#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/
它的工作正是我需要它，但也许有人有一个更好的主意？

谢谢，

I've set up an example here http://jsfiddle.net/q3G7F/6/ Its working exactly how I need it to be, but maybe somebody has a better idea ?
Thanks,

推荐答案

您可以使用一个小jQuery（或javascript） br>
将CSS更改为：

You can do this with a small jQuery (or javascript) snippet.
Change the CSS to this:

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

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

Add this script at the bottom of your page (requires jQuery). This should add a top margin to content and make room for your top element.

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

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

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

You'd also need to listen to window resize events and adjust the margin when the top element's height changes.

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

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

这篇关于固定元素，推回内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！