使用jQuery时，.addClass无法应用于.load导入的HTML导航栏

1. 修正.load回调函数的写法 #

你之前的回调写法存在语法错误，将立即执行函数(IIFE)直接作为load的回调参数，导致滚动逻辑没有在导航栏加载完成后正确绑定。正确的写法是在load的回调函数内部初始化滚动监听逻辑：

$(function(){
  $("#nav").load("navbar.html", function() {
    // 导航栏DOM加载完成后初始化滚动监听
    var previousScroll = 20;
    $(window).on('scroll', function() {
      var currentScroll = $(this).scrollTop();
      
      if (currentScroll >= previousScroll) {
        $('.navbar').addClass("navbar-hide");
      } else {
        $('.navbar').removeClass("navbar-hide");
      }
      
      previousScroll = currentScroll;
    });
  });
});

2. 修复sticky-top失效问题 #

sticky-top失效通常是因为承载导航栏的父容器（即你页面中的#nav元素）存在破坏粘性定位的样式。需要确保#nav的CSS满足以下要求：

#nav {
  width: 100%;
  /* 禁止设置以下会干扰粘性定位的属性 */
  /* overflow: hidden; */
  /* position: relative; */
  /* height: 固定值; */
}

同时，确认navbar.html中的导航栏结构正确，sticky-top类直接应用在<nav>标签上：

<nav class="navbar sticky-top navbar-expand-lg navbar-light bg-light">
  <!-- 导航栏内容 -->
</nav>

3. 可选优化：防抖处理滚动事件 #

滚动事件会频繁触发，添加防抖逻辑可以减少不必要的DOM操作，提升页面性能：

$(function(){
  $("#nav").load("navbar.html", function() {
    var previousScroll = 20;
    var scrollTimeout;
    
    $(window).on('scroll', function() {
      clearTimeout(scrollTimeout);
      scrollTimeout = setTimeout(function() {
        var currentScroll = $(window).scrollTop();
        
        if (currentScroll >= previousScroll) {
          $('.navbar').addClass("navbar-hide");
        } else {
          $('.navbar').removeClass("navbar-hide");
        }
        
        previousScroll = currentScroll;
      }, 50); // 50ms延迟，可根据需求调整
    });
  });
});

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