CSS+jQuery控制头部显示异常求助：Windows端刷新后元素消失

看起来你碰到了桌面浏览器滚动位置缓存导致的经典问题！我来帮你分析并解决它：

问题根源 #

在Windows的桌面浏览器（比如Chrome、Edge）里，刷新页面时浏览器会自动恢复你之前的滚动位置，但你的代码只有在滚动动作发生时才会触发状态判断。页面加载完成后并没有主动执行一次逻辑，所以初始状态还是停留在HTML里的appHide类，直到你手动拖动滚动条才会修正显示状态。另外也有可能是页面加载时过早获取scrollTop，此时浏览器还没完成滚动位置的恢复，导致判断不准确。

解决方案 #

我们需要让代码在页面加载完成后主动执行一次状态检查，同时兼容浏览器的滚动位置缓存，这里有几个可行的方案：

方案1：抽离逻辑并主动触发

把滚动事件里的判断逻辑抽成独立函数，在页面加载完成后立刻调用一次，甚至加个小延迟确保浏览器恢复了滚动位置：

// 把判断逻辑抽成复用函数
function toggleAppNavVisibility() {
  if ($(document).scrollTop() > 0) {
    $('#appNavTop').removeAttr('class');
  } else {
    $('#appNavTop').addClass('appHide');
  }
}

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

// 页面加载完成后主动执行一次
$(document).ready(function() {
  // 加100ms延迟，确保浏览器已恢复之前的滚动位置
  setTimeout(toggleAppNavVisibility, 100);
});

方案2：调整初始HTML状态

你可以修改初始HTML，默认不给#appNavTop加appHide类，让JS来决定初始状态，这样更稳妥：

<aside id="appNav" class="fixed-top">
  <div id="appNavTop">
    <div class="container">
      <div class="row">
        <div class="col-12">
          <span>appNavTop</span>
        </div>
      </div>
    </div>
  </div>
  <!-- 其他内容 -->
</aside>

然后配合方案1的JS代码，页面加载时会根据实际滚动位置来设置导航栏的显示状态，不会默认隐藏。

方案3：改用window.load事件

如果$(document).ready还是有问题，可以换成window.load事件，它会等待所有资源（包括图片等）加载完成后再执行，更确保滚动位置已恢复：

$(window).on('load', function() {
  setTimeout(toggleAppNavVisibility, 100);
});

额外优化小建议 #

• 尽量避免在CSS里使用!important，可以通过提高选择器优先级来覆盖样式，比如把.appHide改成#appNavTop.appHide：

#appNavTop.appHide { height: 0; overflow: hidden }
#appNavTop { 
  -webkit-transition-property: height; 
  transition-property: height; 
  height: 40px 
}

• 给滚动事件加节流，避免频繁触发函数影响性能：

function throttle(func, delay) {
  let timer = null;
  return function() {
    if (!timer) {
      timer = setTimeout(() => {
        func.apply(this, arguments);
        timer = null;
      }, delay);
    }
  }
}

// 用节流后的函数绑定滚动事件
$(window).on('scroll', throttle(toggleAppNavVisibility, 100));

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