如何使导航栏类切换JS代码仅在首页生效，其他页面默认应用.black类？

嘿，这个需求很常见，咱们可以通过先判断当前页面是否为首页，再执行对应逻辑来实现。下面给你两种靠谱的实现方式：

方法一：通过URL判断首页 #

如果你的首页是网站根路径（比如https://yourdomain.com/或https://yourdomain.com/index.html），可以直接检查当前页面的路径：

// 判断是否为首页
const isHomePage = window.location.pathname === '/' || window.location.pathname === '/index.html';

if (isHomePage) {
  // 仅首页执行滚动切换逻辑
  $(window).on('scroll', function () {
    if ($(window).scrollTop() > 75) {
      $('#anim-nav').addClass('bg-fill').removeClass('white').addClass('black');
    } else {
      $('#anim-nav').removeClass('bg-fill').removeClass('black').addClass('white');
    }
  });
  // 页面加载时手动触发一次滚动事件，确保初始状态正确
  $(window).trigger('scroll');
} else {
  // 非首页直接固定添加black类，清除可能的冲突类
  $('#anim-nav').addClass('black bg-fill').removeClass('white');
}

方法二：通过页面独有标识判断 #

如果首页有其他页面没有的专属标识（比如body带home-page类，或存在ID为home-hero的元素），用这种方式更灵活，不受URL变化影响：

// 示例：通过body类判断是否为首页
const isHomePage = $('body').hasClass('home-page');
// 也可以通过独有元素判断：const isHomePage = $('#home-hero').length > 0;

if (isHomePage) {
  // 首页执行滚动切换逻辑
  $(window).on('scroll', function () {
    if ($(window).scrollTop() > 75) {
      $('#anim-nav').addClass('bg-fill').removeClass('white').addClass('black');
    } else {
      $('#anim-nav').removeClass('bg-fill').removeClass('black').addClass('white');
    }
  });
  $(window).trigger('scroll');
} else {
  // 非首页固定设置black类
  $('#anim-nav').addClass('black bg-fill').removeClass('white');
}

小提醒： #

• 手动触发scroll事件是为了避免页面刚加载时，导航栏状态不符合预期的问题。
• 非首页设置类时，记得移除white类，防止之前的逻辑残留干扰样式。

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