Question

<script>

    $('document').ready(function(){
        var nav = $('#topmenuhidden');

        $(window).scroll(function () {
            if ($(this).scrollTop() > 200) {
                nav.addClass('#menushow');
            } else {
                nav.removeClass("#menushow");
            }
        });
    });

</script>

<div class="menu_wrapper" id="topmenuhidden" style="background-color:white;position:fixed;display:none;" >

    <div class="menu" id="menushow">
        <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="about.html">About</a></li>
            <li><a href="services.html">Services</a></li>
            <li><a href="gallery.html">Gallery</a></li>
            <li><a href="barishband.html">Barish Band</a></li>
            <li><a href="upcomingevents.html">Upcoming Events</a></li>
            <li><a href="ourclients.html">Our Clients</a></li>
            <li><a href="contact.html">Contact</a></li>
        </ul>
    </div>

</div>

如何在滚动时显示菜单栏我写了这段代码

Answer 1

尝试：http://jsbin.com/puloxa/2/edit

    $(window).scroll(function () {
        nav.toggle( $(this).scrollTop() > 200 );
    });

此外，有时当您返回页面时，您可能想要检查已加载的页面是否已滚动如下：

    $(window).on("load scroll", function () {
        nav.toggle( $(this).scrollTop() > 200 );
    });

不确定您尝试使用add - removeClass但是... #menushow不是有效的类选择器，您还将其用作ID元素：<div class="menu" id="menushow">。应该是：

nav.addClass('menushow');

但是你需要像这样命名一个styleClass：

.menushow{
   display:block;
}

如何在页面滚动上显示菜单栏

1 个答案: