JS类增删操作：头部横幅滚动显隐及Cookie控制问题求助

咱们先梳理下你当前代码里的几个核心问题：

• 滚动事件的绑定和触发时机不对，导致回到顶部后再次滚动可能无法重新显示横幅；
• 点击关闭按钮后，没有停止滚动事件的监听，即使设置了Cookie，后续滚动仍可能触发横幅显示；
• 初始状态没有明确设置为隐藏，加上重复的scroll事件监听，干扰了正常逻辑。

我调整后的代码如下，每一步都做了针对性优化：

function desktopHeader() {
  // 缓存DOM元素和头部高度，减少重复DOM查询提升性能
  var $headerBanner = $('.module-header-banner');
  var siteHeaderHeight = $('.site-header').height();

  // 优先检查Cookie：如果用户已经关闭过横幅，直接隐藏并终止后续逻辑
  if ($.cookie('headerbanner') === 'exit') {
    $headerBanner.addClass('exit').hide();
    return;
  }

  // 初始化横幅为隐藏状态，严格符合需求
  $headerBanner.hide();

  // 封装滚动处理逻辑，方便后续精准解绑
  function handleScroll() {
    var scrollTop = $(window).scrollTop();
    // 根据滚动位置切换横幅显示/隐藏状态
    if (scrollTop > siteHeaderHeight) {
      $headerBanner.addClass('active').fadeIn();
    } else {
      $headerBanner.removeClass('active').fadeOut();
    }
  }

  // 绑定滚动事件
  $(window).on('scroll', handleScroll);

  // 关闭按钮点击事件
  $('.close-btn').on('click', function() {
    // 设置Cookie，添加path确保全站生效，有效期2小时
    $.cookie('headerbanner', 'exit', { expires: 2/24, path: '/' });
    // 隐藏横幅并标记退出状态
    $headerBanner.addClass('exit').fadeOut();
    // 解绑滚动事件，彻底停止后续的滚动触发逻辑
    $(window).off('scroll', handleScroll);
  });
}

// 确保DOM完全加载后执行函数
$(document).ready(function() {
  desktopHeader();
});

关键优化点说明： #

• Cookie判断前置：页面加载第一时间检查Cookie，避免无效的事件绑定和DOM操作；
• 缓存DOM和高度：提前获取元素和头部高度，减少滚动时的性能消耗；
• 独立滚动处理函数：把滚动逻辑封装成单独函数，点击关闭后可以精准解绑，避免横幅再次被触发；
• 明确初始状态：一开始就隐藏横幅，严格符合“初始状态隐藏”的需求；
• Cookie路径设置：添加path: '/'确保全站页面都能识别这个Cookie，不会出现部分页面还显示横幅的情况。

额外注意事项： #

• 如果不想依赖jQuery Cookie插件，可以把$.cookie替换为原生Cookie操作代码：

  // 原生设置Cookie
  document.cookie = "headerbanner=exit; expires=" + new Date(Date.now() + 2*60*60*1000).toUTCString() + "; path=/";
  // 原生读取Cookie
  function getCookie(name) {
    let value = "; " + document.cookie;
    let parts = value.split("; " + name + "=");
    if (parts.length === 2) return parts.pop().split(";").shift();
  }
  // 替换代码里的$.cookie判断为：if (getCookie('headerbanner') === 'exit')
  

• 测试时记得清除浏览器Cookie，才能看到初始状态的效果。

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