固定元素,推回内容

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）片段来完成此操作。
\n将 CSS 更改为：

\n

#top-1 { position: fixed; top: 0; background-color:#fff}\n#content { background-color: #FFF; background-color:#CCC }\xe2\x80\x8b\n

\n

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

\n

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

\n

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

\n

更新

\n

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

\n

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

\n

\xe2\x80\x8b

\n

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

\n