动态bootstrap 3导航栏固定顶部重叠内容

Question

我发现other questions that解决了类似的问题，但这略有不同，因为顶部条形内容是动态更改的。这意味着我不知道条形图将开始重叠内容的屏幕宽度。

此CSS使用当前顶栏文本以标准分辨率工作。我知道我可以在CSS中使用@media（max-width）来调整padding-top，但这并不能解释动态更改顶栏文本。

body {
    min-height: 2000px;
    padding-top: 70px;
}

有没有办法检查顶部栏的高度，并在不使用Javascript的情况下为身体添加偏移？

另一个，也许更好的选择是，只要单个行太拥挤，就可以将顶部栏切换到移动视图。有关如何做到这一点的任何想法？

由于

https://jsfiddle.net/waspinator/4c2yespy/7/embedded/result/

Original fixed top example

编辑： 使用javascript修复https://jsfiddle.net/4c2yespy/8/

更新了jsfiddle

Answer 1

除了机智css之外没有办法做这个，但你可以使用javascript resize事件来动态改变身体填充顶部：

function adjust_body_offset() {
    $('body').css('padding-top', $('.navbar-default').outerHeight(true) + 'px' );
}

$(window).resize(adjust_body_offset);

$(document).ready(adjust_body_offset);