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

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

Bootstrap导航遮盖内容的解决办法
Bootstrap导航遮盖内容的解决办法

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

大致意思就是给页面设置两个导航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开发前端时可以帮助到大家!

未经允许不得转载:西德SEO » Bootstrap给nav设置navbar-fixed-top定位后导航栏遮盖内容完美解决方案!

打赏

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

'); })();