jQuery滚动控制导航栏显隐问题：1300px显示2100px需隐藏

嘿，看来你卡在导航栏滚动到2100px时无法隐藏的问题上了！我来帮你梳理下可能的问题点，再给出一个靠谱的解决方案。

首先，先排查下你当前代码可能存在的逻辑漏洞：通常这类问题要么是滚动位置的判断逻辑不严谨，要么是CSS类的优先级不够，或者是滚动事件的监听没处理好。

第一步：修正CSS样式 #

先确保你的基础样式和控制类的优先级是正确的。比如：

/* 初始隐藏导航栏 */
#navbar {
  display: none;
  /* 可选：添加固定定位等样式，根据你的需求调整 */
  position: fixed;
  top: 0;
  width: 100%;
  background: #fff;
}

/* 显示导航栏的控制类，用更具体的选择器确保优先级 */
#navbar.show-nav {
  display: block;
}

这里用#navbar.show-nav这种组合选择器，能保证它的样式优先级高于初始的#navbar样式，避免被意外覆盖。

第二步：修复jQuery滚动事件逻辑 #

你的核心问题大概率是滚动位置的判断逻辑不对——比如只处理了滚动到1300px显示的情况，却没正确覆盖“超过2100px隐藏”的场景。试试下面的代码：

$(document).ready(function() {
  // 缓存导航栏元素，减少DOM查询次数，提升性能
  var $navbar = $('#navbar');

  // 监听窗口滚动事件
  $(window).scroll(function() {
    var scrollPos = $(window).scrollTop();

    // 明确判断区间：只有在1300px ≤ 滚动位置 < 2100px时显示，其余情况隐藏
    if (scrollPos >= 1300 && scrollPos < 2100) {
      $navbar.addClass('show-nav');
    } else {
      $navbar.removeClass('show-nav');
    }
  });

  // 页面加载时主动触发一次滚动判断，避免初始状态异常
  $(window).trigger('scroll');
});

这个逻辑很清晰：只有当滚动位置落在1300到2100px的区间内时，才给导航栏加显示类；不管是滚动到1300px以下，还是2100px及以上，都会移除显示类，让导航栏隐藏。

额外排查点 #

如果调整后还是不行，你可以检查这几点：

• 有没有正确引入jQuery？要确保你的自定义JS文件之前已经加载了jQuery库
• 导航栏的选择器是不是正确？比如你用的是class还是id，要和代码里的#navbar对应上
• 有没有其他JS代码干扰了滚动事件？比如某些脚本阻止了默认滚动行为

这样调整后，应该就能解决滚动到2100px时无法隐藏的问题啦！

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