将内容推送到固定位置标题后面

Question

我在链接中创建了关于问题问题的小提琴

页眉和页脚绝对定位，宽度为100％。 中间内容由仪表板表组成。 标题由两个图像组成，点击后将切换内容。
当我点击slide-toggle-1 ，会显示headerbottombar的内容。
但中间内容是隐藏和重叠的。
单击slide-button-1和slide-button-2时，如何正确显示中间内容的内容。
我要感谢所有的建议和解决方案。 只要提供可行的解决方案，解决方案在css，jquery和javascript中都是可接受的。

Answer 1

更新：如果你想要一个粘性到顶部的可变高度标题，你可能必须使用一些动态调整内容的上边距的javascript

var offset = document.getElementById("sticky-top-id").offsetHeight;
document.getElementById("content-id").style.marginTop = offset + 'px';

资源

旧答案：

有很多方法可以达到你想要的效果。 一种是将标题的位置更改为relative （并删除标题和内容之间的换行符）。 如果使用fixed或absolute位置，标题将与正文内容重叠。 而相对会在标题扩展时将内容推下来。

见： https ： //jsfiddle.net/d0pyxdoj/3/

PS页眉/页脚的位置fixed在您的代码中，而不是absolute

Answer 2

为什么不尝试添加一个带有margin-top的类来根据需要降低div。 像这样：

.top{ margin-top:100px; }

使用“.content”将此添加到div中，如下所示：

<div class="content top">

然后只需点击2次就可以切换它：

$( ".content" ).toggleClass( "top" );

您可以提供其他样式，但这是基本的运行。

Answer 3

请查看以下示例。 使用脚本识别高度我们可以注入间距。

脚本：

function heightCalc(){
         topHeight = $('.sticky-top').height();
       $('.content').css({"margin-top": topHeight+"px"});
     }

示例小提琴手： https ： //jsfiddle.net/scj4u0t5/1/