如何实现向下滚动隐藏全局头部、向上滚动反转颜色显示

需求说明 #

现有代码实现了向下滚动超过200px时隐藏菜单，向上滚动恢复显示，但原白色菜单在页面下方空白区域辨识度低。需要调整为：

• 向上滚动显示菜单时，切换为深色文字+浅色背景
• 回到页面顶部（滚动距离<200px）时，恢复菜单原白色样式
• 弃用Scroll Triggered CSS Animation插件，改用定制代码实现

修改后的JavaScript代码 #

jQuery(function($){
  let lastScrollTop = 0;

  $(window).scroll(function() {
    const currentScrollTop = $(window).scrollTop();
    const header = $('#global-header-section');

    // 滚动超过200px时才触发隐藏/显示逻辑
    if (currentScrollTop > 200) {
      // 向下滚动：隐藏菜单
      if (currentScrollTop > lastScrollTop) {
        header.removeClass('show-header dark-header').addClass('hide-header');
      } 
      // 向上滚动：显示菜单并切换深色样式
      else {
        header.removeClass('hide-header').addClass('show-header dark-header');
      }
    } 
    // 回到顶部区域（<200px）：恢复原样式
    else {
      header.removeClass('hide-header show-header dark-header');
    }

    lastScrollTop = currentScrollTop;
  });
});

代码改动说明

1. 修正原逻辑判断：用当前滚动距离替代历史滚动值判断是否进入顶部区域，确保触发逻辑准确
2. 新增dark-header类，专门标记菜单需要切换为深色文字+浅色背景的状态
3. 明确各滚动场景下的类名切换规则，避免样式冲突

修改后的CSS代码 #

#main-content{
  margin-top: 7vw;
}

/* 菜单隐藏样式 */
.hide-header {
  opacity: 0;
  margin-top: -200px !important;
}
 
/* 菜单显示基础样式 */
.show-header {
  opacity: 1;
  margin-top: 0px !important;
}

/* 深色文字+浅色背景样式 */
.dark-header {
  background-color: #f8f9fa; /* 浅色背景，可自行调整色值 */
  color: #212529; /* 深色文字，可自行调整色值 */
}
/* 针对菜单内独立链接元素单独设置颜色（按需添加） */
.dark-header .menu-item a {
  color: #212529 !important;
}
 
#global-header-section {
  -webkit-transition: all 0.5s ease !important;
  -moz-transition: all 0.5s ease !important;
  -o-transition: all 0.5s ease !important;
  -ms-transition: all 0.5s ease !important;
  transition: all 0.5s ease !important;
}

CSS改动说明

1. 新增dark-header类的样式规则，可根据网站整体配色自行调整背景和文字色值
2. 针对菜单内的链接元素单独设置颜色（如果原菜单链接有独立样式），确保文字颜色切换生效
3. 保留原有过渡动画属性，保证样式切换的平滑性

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