WordPress中用JavaScript实现滚动时div平滑显隐问题求助

先直接给你修正后的代码，再讲问题原因：

修正后的CSS代码 #

#headbar {
    opacity: 1; /* 明确初始透明度，保证第一次切换触发过渡 */
    transition: opacity 0.5s ease; /* 仅针对透明度过渡，比all更高效 */
    visibility: visible; /* 配合opacity控制元素是否可交互 */
}

.hide {
    opacity: 0;
    visibility: hidden; /* 透明后禁止点击，优化体验 */
}

.show {
    opacity: 1;
    visibility: visible;
}

优化后的JS代码 #

<script>
// 提前缓存DOM元素，避免滚动时重复查询
const headbar = document.getElementById("headbar");

window.onscroll = scrollFunction;

function scrollFunction() {
    // 用浏览器视口宽度判断，比screen.width更适配窗口缩放场景
    if (window.innerWidth > 780) {
        const scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
        if (scrollTop > 50) {
            headbar.classList.replace("show", "hide");
        } else {
            headbar.classList.replace("hide", "show");
        }
    }
}
</script>

问题原因说明 #

1. 初始状态缺失：你之前的#headbar没有设置初始opacity值，浏览器无法识别过渡的起始状态，导致第一次切换直接跳变，没有过渡动画。
2. 冗余的过渡定义：.hide和.show里重复写transition完全没必要，过渡属性只需要在基础元素#headbar上定义一次即可。
3. 宽度判断不准确：window.screen.width是屏幕物理宽度，不会随浏览器窗口缩放变化，改用window.innerWidth才能准确判断当前视口宽度。
4. DOM查询性能浪费：每次滚动都调用getElementById会重复查询DOM，提前缓存元素能提升性能。

另外，添加visibility是为了解决opacity:0时元素仍可点击的问题，让交互更合理。

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