Question

我一直在寻找使用Bootstrap 3进行动态词缀的漂亮解决方案，最后我的简单解决方案如下。除了一个功能外，一切都很棒。当我将网站的大小调整为移动和扩展菜单时，整个菜单项列表是透明的。当我开始向下滚动时，在导航栏被粘贴的那一刻之后，透明问题就不存在了。我读了一些帖子，它可能是由导航栏的相对位置引起的，但不知道如何解决这个问题并且不要丢失我的功能。

<div id="nav-wrapper">
    <div id="nav" class="navbar-inverse">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>
            <div class=" collapse navbar-collapse navbar-center" id="myNavbar">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">ZESPÓL</a></li>
                    <li><a href="#">ZAPLECZE</a></li>
                    <li><a href="#">GALERIA</a></li>
                    <li><a href="#">MATERIALY</a></li>
                    <li><a href="#">KONTAKT</a></li>
                </ul>

            </div>
        </div>
    </div>
    <!-- navbar -->
</div>

JS：

function myaffix() {
    var affixoffset = $('.navbar-inverse').offset().top
    $('#nav-wrapper').height($(".navbar-inverse").height());
    $(window).scroll(function() {
        if ($(window).scrollTop() <= affixoffset) {
            $('.navbar-inverse').removeClass('affix');
        } else {
            $('.navbar-inverse').addClass('affix');
        }
    });
};
$(document).ready(function() {
    myaffix();
    $(window).on("resize", function() {
        myaffix();
    });
});

和我的css的一部分：

#nav.affix {
    position: fixed;
    top: 0;
    width: 100%
}
#nav > .navbar-inner {
    border-left: 0;
}

.navbar-toggle
{
    float:none;

}
.navbar-header
{
    text-align:center;
}
.navbar-inverse .navbar-nav {
    display: inline-block;
    float: none;
    vertical-align: top;
}

.navbar-inverse .navbar-collapse {
    text-align: center;
}

Bootstrap 3 - 动态词缀和透明折叠栏

0 个答案: