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

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- #menushow做什么，但是... #menushow不是有效的类选择器，您还将其用作ID元素： <div class="menu" id="menushow"> 。 应该：

nav.addClass('menushow');

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

.menushow{
   display:block;
}