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

Question

我发现 other questions that 解决了类似的问题，但这略有不同，因为顶部栏的内容是动态变化的。这意味着我不知道该栏将在哪个屏幕宽度处开始重叠内容。

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

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

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

另一个也许更好的选择是，当顶部栏太拥挤而无法容纳一行时，将其切换到移动视图。关于如何做到这一点的任何想法？

谢谢

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

Original fixed top example.

---

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

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);