Bootstrap使用fixed-top导致其下内容被覆盖的问题解决办法

Bootstrap在使用fixed-top的时候，导致下面的内容因为固定而被覆盖了。

直接的解决办法就是在body元素或者下方元素添加padding-top样式，将其撑起

可以看看Bootstrap官方的一个例子：传送门

但是有时候我们的padding-top值是动态的，无法准确值，那么久可以使用js计算出添加fixed-top元素的高度值。然后动态的添加进去即可，这里直接放代码大家参考一下：

    var onResize = function() {
        let headerHigh = $(".site-header .navbar").height();
        console.log(headerHigh);
        $("body").css("padding-top", headerHigh);
    };
    $(window).<a target="_blank" href="https://www.xuemy.cn/archives/tag/resize" title="View all posts in resize">resize</a>(onResize);
    $(function() {
        onResize();
    });

console.log(headerHigh);可以查看当前元素的高度，然后通过css附加即可。这里使用到了jQuery

$(window).resize表示：resize调整文档视图（窗口）大小时会触发该事件。

可以参考MDN的文档：传送门