Javascript Bootstrap 3桌面滚动粘性菜单

我正在尝试让粘性引导菜单在桌面上工作。当我向下滚动到某个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>

---

可以在此处看到站点：

如果您可以通过滚动位置与定义的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');
        }
    });
});

请参见引导层：

---

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

这就是我试图实现的，我也会尝试scrollspy，并让你知道我是否能掌握它。

$(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');
        }
    });
});