如何仅在.woocommerce-store-notice可见时添加内边距？

这个问题我之前处理过好几次！确实，硬加内边距会在通知栏隐藏时留下多余的空白，太影响页面体验了。给你两种实用的解决方案，你可以根据项目的浏览器兼容需求来选：

方案1：纯CSS（现代浏览器首选） #

现在主流浏览器都支持CSS的:has()选择器了，这是最简单的实现方式——直接通过父元素判断子元素的可见状态，动态应用内边距。

假设你的内容容器是.main-content（替换成你实际的内容选择器），通知栏是body的直接子元素，代码如下：

/* 仅当.woocommerce-store-notice可见时，给内容容器添加上内边距 */
body:has(.woocommerce-store-notice:visible) .main-content {
  padding-top: 40px; /* 数值和通知栏的高度保持一致 */
}

注意事项： #

• 如果通知栏的父元素不是body，把body换成对应的父元素选择器即可
• :visible伪类会判断元素是否在页面中可见（display不为none、visibility不为hidden、opacity不为0等）
• 兼容性：Chrome 101+、Firefox 121+、Safari 15.4+都支持，不需要兼容旧版浏览器的话，这个方案最省心

方案2：JavaScript（兼容旧浏览器） #

如果你的项目需要兼容不支持:has()的旧浏览器（比如旧版Chrome、Firefox），可以用JS监听通知栏的显示/隐藏状态，动态给内容容器添加/移除样式类。

步骤1：添加CSS类 #

先写好需要的内边距样式，用类来控制：

/* 定义带内边距的类 */
.store-notice-active-padding {
  padding-top: 40px; /* 匹配通知栏高度 */
}

步骤2：编写JS逻辑 #

监听通知栏的样式或类变化，动态切换内容容器的类：

// 获取通知栏和内容容器元素
const storeNotice = document.querySelector('.woocommerce-store-notice');
const contentContainer = document.querySelector('.main-content'); // 替换成你的内容选择器

// 核心判断函数：根据通知栏可见性切换类
function toggleContentPadding() {
  if (!storeNotice || !contentContainer) return;
  
  // 获取通知栏的实际显示状态
  const isVisible = window.getComputedStyle(storeNotice).display !== 'none' && 
                    window.getComputedStyle(storeNotice).visibility !== 'hidden' &&
                    window.getComputedStyle(storeNotice).opacity !== '0';
  
  if (isVisible) {
    contentContainer.classList.add('store-notice-active-padding');
  } else {
    contentContainer.classList.remove('store-notice-active-padding');
  }
}

// 页面加载时先执行一次，初始化状态
toggleContentPadding();

// 监听通知栏的属性变化（比如style或class的修改）
const observer = new MutationObserver(toggleContentPadding);
observer.observe(storeNotice, {
  attributes: true,
  attributeFilter: ['style', 'class'] // 只监听style和class属性变化，提升性能
});

// 可选：监听窗口 resize，防止响应式场景下通知栏显示/隐藏未被检测到
window.addEventListener('resize', toggleContentPadding);

额外提示： #

• 如果你知道WooCommerce显示/隐藏通知栏的触发事件（比如某些自定义按钮点击），可以直接在事件回调里调用toggleContentPadding()，这样比MutationObserver更高效
• 内边距的数值建议和通知栏的实际高度（包括padding、border）保持一致，避免出现遮挡或空隙过大的问题

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