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>

下面的脚本；

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

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

解决方法:

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

看到靴子：http://www.bootply.com/CGY86c9Baz

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

标签：twitter-bootstrap,twitter-bootstrap-3,css,javascript,jquery
来源： https://codeday.me/bug/20191121/2053408.html