移动端关闭固定消息横幅后，如何重新计算内容顶部边距？

问题根源 #

你的代码未生效主要是两个核心原因：

• 点击关闭按钮时，横幅的隐藏操作可能晚于边距计算逻辑，导致计算的还是横幅隐藏前的高度
• 缺少页面初始化调用和屏幕尺寸变化的监听，初始状态或设备横竖屏切换时无法自动适配

修正后的代码方案 #

// 缓存移动端媒体查询对象，避免重复创建
const mobileMediaQuery = window.matchMedia('(max-width: 1023px)');

function calculatePageWrapperMargin() {
  const pageWrapper = document.querySelector(".pageWrapper");
  
  // 非移动端时重置边距，避免大屏下保留多余间距
  if (!mobileMediaQuery.matches) {
    pageWrapper.style.marginBlockStart = '0';
    return;
  }

  // 计算所有可见横幅的总高度
  const banners = document.querySelectorAll(".site-banner");
  let totalBannerHeight = 0;
  
  banners.forEach(banner => {
    // 只统计处于显示状态的横幅（display:none的元素offsetHeight会自动为0，此判断可根据实际隐藏逻辑调整）
    if (window.getComputedStyle(banner).display !== 'none') {
      totalBannerHeight += banner.offsetHeight;
    }
  });

  // 设置页面容器上边距
  pageWrapper.style.marginBlockStart = `${totalBannerHeight}px`;
}

// 页面加载时初始化边距
calculatePageWrapperMargin();

// 绑定横幅关闭按钮的点击事件
const closeBannerBtn = document.querySelector('.banner__btn');
if (closeBannerBtn) {
  closeBannerBtn.addEventListener('click', () => {
    // 用setTimeout将计算逻辑延后到事件循环下一轮，确保横幅隐藏操作已完成
    setTimeout(calculatePageWrapperMargin, 0);
  });
}

// 监听屏幕尺寸变化，自动适配边距（比如横竖屏切换）
mobileMediaQuery.addEventListener('change', calculatePageWrapperMargin);

关键修改说明 #

• 缓存媒体查询对象，提升重复调用时的性能
• 增加非移动端的边距重置逻辑，保证多终端适配一致性
• 改用querySelectorAll获取横幅元素，返回静态集合避免动态集合的意外问题
• 增加横幅可见性判断，确保只统计实际显示的横幅高度
• 初始化时调用计算函数，保证页面加载时边距正确
• 通过setTimeout确保横幅隐藏操作完成后再计算边距，解决时序问题
• 添加媒体查询变化监听，适配设备屏幕尺寸变更场景

内容的提问来源于stack exchange，提问作者iain-g