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

时间:2016-09-27 05:35:27

标签: javascript jquery html css

我在 link here

中创建了关于问题的小提琴

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

3 个答案:

答案 0 :(得分:0)

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

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

Source

旧答案:

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

请参阅:https://jsfiddle.net/d0pyxdoj/3/

P.S。页眉/页脚在代码中的位置为fixed,而不是absolute

答案 1 :(得分:0)

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

.top{ margin-top:100px; }

使用" .content"将此添加到div中像这样:

<div class="content top">

然后只需点击2次点击即可切换:

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

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

答案 2 :(得分:0)

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

<强>脚本:

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

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