移动端滚动向上时Header重现功能失效求助（WordPress+Beaver Builder）

一、优化核心代码（解决兼容性与准确性问题） #

当前代码在移动端失效的常见原因是依赖固定像素值的top偏移、滚动事件触发不兼容，以及未考虑触摸滚动特性，以下是优化后的代码：

优化后的CSS #

#header-global {
    position: fixed;
    width: 100%;
    top: 0; /* 初始位置固定在顶部 */
    left: 0; /* 确保横向无偏移 */
    box-sizing: border-box; /* 防止内边距/边框导致宽度溢出 */
    transition: transform 0.3s ease; /* 改用transform实现位移，性能更好且适配任意高度 */
    z-index: 9999; /* 提高层级，避免被其他元素遮挡 */
}

/* 添加隐藏状态的类，代替直接操作style */
#header-global.header-hidden {
    transform: translateY(-100%); /* 向上移出视口，适配header自身高度 */
}

优化后的JS #

// 节流函数减少滚动事件触发频率，避免移动端卡顿
function throttle(func, delay) {
    let timer = null;
    return function() {
        const context = this;
        const args = arguments;
        if (!timer) {
            timer = setTimeout(function() {
                func.apply(context, args);
                timer = null;
            }, delay);
        }
    }
}

let prevScrollpos = window.pageYOffset;
const header = document.getElementById('header-global');

// 确保元素存在再绑定事件
if (header) {
    // 使用addEventListener代替onscroll，避免被其他脚本覆盖
    window.addEventListener('scroll', throttle(function() {
        const currentScrollPos = window.pageYOffset;
        
        // 滚动到顶部时始终显示header
        if (currentScrollPos <= 0) {
            header.classList.remove('header-hidden');
        } 
        // 向上滚动时显示header
        else if (prevScrollpos > currentScrollPos) {
            header.classList.remove('header-hidden');
        } 
        // 向下滚动时隐藏header
        else {
            header.classList.add('header-hidden');
        }
        
        prevScrollpos = currentScrollPos;
    }, 50)); // 50ms节流间隔，平衡响应速度与性能
}

二、排查Beaver Builder相关干扰 #

• 检查移动端专属样式：进入Beaver Builder编辑器，确认是否为移动端设置了#header-global的display: none或position: static等属性，这类设置会覆盖固定定位。
• 禁用内置滚动优化：部分Beaver Builder版本会对移动端滚动做优化，可能拦截scroll事件。可在主题或Beaver Builder全局设置中，查找“移动端滚动优化”“触摸事件处理”类选项并暂时禁用测试。

三、排除WordPress插件冲突 #

• 暂时禁用除Beaver Builder外的所有插件（如缓存、性能优化、移动端适配插件），逐一开启排查是否有插件干扰了scroll事件或header样式。
• 检查是否有插件引入了自定义滚动容器（而非全局window滚动），这种情况下需要监听容器的scroll事件而非window。

四、验证视口设置 #

确保网站<head>中包含正确的移动端视口标签，否则pageYOffset计算会出现异常：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

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