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

Question

我发现其他 问题 是解决类似的问题,但是这是略有不同,如最上面一栏的内容是动态变化的.这意味着我不知道该栏将以哪个屏幕宽度重叠内容.

此CSS使用当前顶部栏文本以标准分辨率工作.我知道我可以在CSS中使用@media(max-width)来调整padding-top,但这并不能解释动态更改顶部栏文本的问题.

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

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

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

谢谢

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

原始固定顶部示例.

---

编辑:用javascript修复https://jsfiddle.net/4c2yespy/8/更新jsfiddle

Answer 1

没有办法只使用这个机智css,但你可以使用javascript resize事件来动态更改body padding top:

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

$(window).resize(adjust_body_offset);

$(document).ready(adjust_body_offset);