Question

我试图让粘性引导菜单在桌面上运行。当我向下滚动到某个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');
        }
    });
});

请参阅bootply：http://www.bootply.com/CGY86c9Baz

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

Scroll上的Bootstrap 3桌面便携式菜单

1 个答案: