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

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

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

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

图片[1]-Bootstrap使用fixed-top导致其下内容被覆盖的问题解决办法-一只薛眠羊

但是有时候我们的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的文档:传送门

© 版权声明
THE END
喜欢就支持一下吧
点赞5赞赏 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容