javascript - 滚动更改的Javascript菜单的其他声明不起作用

因此，当您滚动到页面的第一部分（我称其为“横幅”）时，该菜单会发生变化，并且它以响应形式变为典型的切换栏，菜单在该栏上向下滑动。

<header class="ease">
    <div class="menu-toggle"><img src="imgs/vap-designs-logo-black.svg" class="logo" alt="Vap Designs - Logotype" /></div>
    <a href="index.html"><img src="imgs/vap-designs-logo.svg" class="logo" alt="Vap Designs - Logotype" /></a>
    <nav>
        <ul>
            <li><a href="about.html" class="menu">about</a></li>
            <li><a href="graphic.html" class="menu">graphic</a></li>
            <li><a href="video.html" class="menu">video</a></li>
            <li><a href="contact.html" class="menu">contact</a></li>
        </ul>
    </nav>
</header>

当用户调整窗口大小时，我使用Javascript更改其CSS属性。 “ header-white”类更改标题的背景颜色和高度（我更喜欢这样做，而不是仅通过Javascript添加属性）。关键是，当窗口宽度小于768px时，我希望我的标头永久具有“ header-white”类。它似乎一直工作到您向上或向下滚动时为止，即使在else语句中未指定执行更改时，它也会更改。

这是脚本：

$(window).resize(function () {
    h = $('.banner').height();

    if ($(window).width() > 768) {

        $('nav').css({'display' : 'block'});
        $('header').removeClass('toggle-white');

        if ($(document).scrollTop() > h) {
            $('header').addClass('header-white');
            $('header > a img').attr('src', 'imgs/vap-designs-logo-black.svg');
        } else {
            $('header').removeClass('header-white');
            $('header > a img').attr('src', 'imgs/vap-designs-logo.svg');
        }

        $(window).on('scroll', function(){
            if ( $(window).scrollTop() >= h ){
                $('header').addClass('header-white');
                $('header > a img').attr('src', 'imgs/vap-designs-logo-black.svg');
            } else {
                $('header').removeClass('header-white');
                $('header > a img').attr('src', 'imgs/vap-designs-logo.svg');
            }
        });
    } else {
        $('nav').hide();
        $('header').addClass('header-white');
    }
}).resize();

最佳答案

您需要在else部分中删除“滚动”处理程序，否则即使不满足原始条件，该处理程序仍会被触发。您可以这样做：

$(window).off('scroll')

（或者，如果您有多个滚动处理程序，请将函数保存在变量中，然后将其传递给.on和.off）