Bootstrap给nav设置navbar-fixed-top定位后导航栏遮盖内容完美解决方案!

作者 安阳seo网站建设推广排名优化 所属分类 网站建设技术 发布时间 2020-01-13 PM 阅读次数 117 次 评论 0 条

这也是我在使用Bootstrap3开发网站时遇到最多的问题,因为Bootstrap导航栏不设置navbar-fixed-top会自动随着内容滚动,许多前端开发人员都会使导航栏固定显示,这时候就会给导航nav设置navbar-fixed-top,但是往往会导致导航栏遮盖内容,许多前端都会给body设置padding-top或者使导航下面的内容margin-top,但是这些都并不完美使用PX像素的办法始终是固定的,这样就会造成在不同分辨率的屏幕下闪白过多过少的问题,有没有更加完美的解决方案呢?

完美解决方案一:使用两个导航占位

大致意思就是给页面设置两个导航nav一个是空的导航栏一个则是设置navbar-fixed-top的导航栏

代码为:

<nav class="navbar navbar-default">
</nav>
<nav class="navbar navbar-default  navbar-fixed-top">
     ..........
</nav>

完美解决方案二:使用JS使body永远根据nav高度进行padding-top(推荐)

大致意思就是使body通过不同分辨率屏幕下nav的搞定设定padding-top响应的值

<nav class="navbar navbar-default  navbar-fixed-top">
     ..........
</nav>
<script type="text/jscript">
var onResize = function() {
        $("body").css("padding-top", $(".navbar").height());
    };
    $(window).resize(onResize);
    $(function() {
        onResize();
    });
</script>

以上则是Bootstrap给导航nav设置navbar-fixed-top后导航栏遮盖内容完美解决方案,希望日后在使用Bootstrap开发前端时可以帮助到大家!

分享到: 更多
标签: 移动端, 自适应

非特殊说明,本站所有文章均为站长原创。

评论啦~