滚动至指定像素后Header无法正常切换显示/隐藏状态的问题求助

嘿，我一眼就看出问题所在啦！你的逻辑顺序搞反了，咱们来修正一下～

问题根源 #

你现在的代码里，scrollTop()>1980这个条件会先被判断，当滚动到2500px的时候，因为2500肯定大于1980，所以第一个条件已经满足，后面的else if ($(this).scrollTop()>2500)根本不会被执行，这就是为什么滚动到2500px时切换不回去的原因。

修改后的代码 #

只需要调整条件的判断顺序，先检查更大的数值（2500px），再检查1980px，就能实现你想要的效果：

$(window).scroll(function() {
  if ($(this).scrollTop() > 2500) {
    // 滚动到2500px以上，切换回初始状态（显示navBar）
    $('#navBar').fadeIn();
  } else if ($(this).scrollTop() > 1980) {
    // 滚动到1980-2500px之间，隐藏navBar
    $('#navBar').fadeOut();
  } else {
    // 滚动在1980px以下，保持初始显示状态
    $('#navBar').fadeIn();
  }
});

逻辑说明 #

• 当滚动距离超过2500px时，优先触发第一个条件，把#navBar显示回来，回到初始状态；
• 当滚动距离在1980px到2500px之间时，触发第二个条件，隐藏#navBar；
• 滚动距离在1980px以下时，保持#navBar显示的初始状态。

这样调整后，滚动切换的逻辑就完全符合你的需求啦～

内容的提问来源于stack exchange，提问作者oli venöl