javascript - 仅当用户位于页面下方 X 像素时才折叠 NavBar

Question

是否可以让 Bootstrap 仅在用户位于页面下方 X 像素时折叠导航栏？

我知道这可以通过使用数据属性 data-offset-top 来附加菜单。但是在折叠按钮或导航 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 来确保函数不会执行得太频繁。