Question

当用户在页面下方X像素时，是否可以使Bootstrap仅折叠导航栏？

我知道可以通过使用数据属性data-offset-top来粘贴菜单。但是在折叠按钮或nav div上使用相同的属性并不能实现这一点。

<nav class="navbar">
    <div class="container-fluid">
        <div>
            <a class="navbar-brand" href="/"><img src="img/logo.png" alt=""/></a>
        </div>
        <!-- Affix Navbar when 280px from top: This works -->
        <div class="navbar-header pull-right" data-spy="affix" data-offset-top="280">
            <!-- Collapse Navbar when 280px from top: Doesn't work -->
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-offset-top="280" data-target="#navbar-collapse">
                    <span class="sr-only">Toggle navigation</span>
            </button>
            <!-- The below should collapse only when the user is 280px or more from the top -->
            <div class="collapse navbar-collapse" id="navbar-collapse">
                <ul class="nav navbar-nav navbar-right">
                    <li class="active">
                        <a class="text-uppercase page-scroll" href="#call-to-action">home</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</nav>

Answer 1

你总是可以用jquery自己做。

$(window).on('scroll', function() {
    var y_scroll_pos = window.pageYOffset;
    var scroll_pos_test = 150;             // set to whatever you want it to be

    if(y_scroll_pos >= scroll_pos_test) {
       $('#navbar-collapse').collapse('hide');
    } else {
       $('#navbar-collapse').collapse('show');
    }
});

注意：Builds on this answer

如果你使用的是lodash / underscore，你可以使用throttle来确保该功能不会经常执行。

仅当用户在页面下方X像素时才折叠NavBar

1 个答案: