javascript - Bootstrap 3 桌面粘滞菜单滚动

Question

我正在尝试让粘性 Bootstrap 菜单在桌面上工作。当我向下滚动到某个 div 元素时，我希望粘性菜单出现，但是当用户向上滚动并经过该 div 元素时，我希望隐藏粘性菜单。无法完全弄清楚发生了什么。

<!--sticky desktop menu-->
        <div id="nav">
            <div class="navbar navbar-default navbar-fixed-top hidden-lg navbar-inverse navbar-static-top" role="navigation">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="/"></a>
                </div>
                <div class="collapse navbar-collapse">
                    <ul class="nav navbar-nav">
                        <li><a href="#" class="">HOME</a></li>
                        <li><a href="#">HOW IT WORKS</a></li>
                        <li><a href="#pricing">PRICING</a></li>
                        <li><a href="#">WATCH OUR VIDEO</a></li>
                        <li><a href="#testimonials">REAL LIFE TESTIMONIALS</a></li>
                        <li><a href="#faqs">FAQ'S</a></li>
                        <li><a href="#about">ABOUT US</a></li>
                    </ul>
                </div>
                <!--/.nav-collapse -->
            </div>
        </div>

下面的脚本；

$('#nav').affix({
    offset: {
        top: $('.desktopSticky').height()            
    }
});

可以在这里看到网站:http://bit.ly/1i4VUxv

Answer 1

如果您可以通过滚动位置与定义的 div 进行操作，那么这对您有用:

$(function() {
    var div = $(".sticky");
    $(window).scroll(function() {    
        var scroll = $(window).scrollTop();

        if (scroll >= 100) {
            div.removeClass('hidden-lg').addClass("visible-lg");
        } else {
            div.removeClass("visible-lg").addClass('hidden-lg');
        }
    });
});

查看 Bootstrap :http://www.bootply.com/CGY86c9Baz

如果您希望它由特定的 div 激活，我认为 scrollspy 可能是您的解决方案，但我不知道如何让它工作!