jQuery实现滚动隐藏.site-header，菜单激活时保持可见的问题

这个问题很好解决，我们只需要在原有滚动逻辑里增加一个判断条件，排除菜单按钮处于激活状态的情况就可以了！

修改思路 #

原代码在滚动时会无条件触发头部的淡出动画，我们需要在触发淡出的判断里，加上按钮是否带有.activated类的检查——如果按钮处于激活状态，就跳过淡出逻辑，让头部保持可见。

修改后的完整代码 #

JavaScript 部分

var $header = $(".site-header");
var opacity = $header.css("opacity");
var scrollStopped;
var fadeInCallback = function () {
    if (typeof scrollStopped != 'undefined') {
        clearInterval(scrollStopped);
    }
    scrollStopped = setTimeout(function () {
        // 只有当按钮未激活时才执行淡入
        if (!$('.menu-toggle').hasClass('activated')) {
            $header.animate({ opacity: 1 }, "slow");
        }
    }, 500);
}
$(window).scroll(function () {
    // 新增按钮激活状态的判断，激活时不执行淡出
    if (!$header.is(":animated") && opacity == 1 && !$('.menu-toggle').hasClass('activated')) {
        $header.animate({ opacity: 0 }, "slow", fadeInCallback);
    } else {
        fadeInCallback.call(this);
    }
});
// 改成toggleClass，实现点击切换激活/关闭状态
$('.menu-toggle').on('click', function(){
    $(this).toggleClass('activated');
});

HTML 部分（无需修改，保持原样即可）

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>
<section style="height:5000px;">
    <div class="site-header" style="position:fixed; top:5px; left:5px; width:200px; height:100px; display:block; background:#000; opacity:1; color:#fff;">
        <button class="menu-toggle">Menu</button>
        <nav class="nav-primary">
            <ul>
                <li>Menu item 1</li>
                <li>Menu item 2</li>
                <li>Menu item 3</li>
            </ul>
        </nav>
    </div>
</section>

关键修改点说明 #

1. 滚动事件中的判断：在触发淡出的if条件里新增了!$('.menu-toggle').hasClass('activated')，确保只有当按钮未激活时，才会执行头部淡出。
2. 淡入回调函数：在fadeInCallback的定时器里也加了同样的判断，避免菜单激活状态下头部自动淡入。
3. 按钮点击优化：把原代码的addClass改成toggleClass，这样点击按钮可以切换激活/关闭状态，更符合用户使用习惯。

这样修改后，当你点击按钮激活菜单后，滚动页面时头部会一直保持可见；关闭菜单后，滚动逻辑又会恢复原来的隐藏/显示效果。

内容的提问来源于stack exchange，提问作者JaxJames