如何让jQuery弹窗模态框仅在首页滚动到指定位置时显示？

没问题，这个需求其实很容易实现，核心就是先判断当前页面是不是首页，再结合你的滚动触发逻辑就行。我给你分步骤讲清楚：

1. 先实现首页判断逻辑 #

判断是否为首页最常用的方式是通过当前页面的URL路径来识别，比如大多数网站的首页路径是根路径（/）或者/index.html。我们可以写一个简单的函数来做这个判断：

function isHomePage() {
  // 根据你的实际首页URL调整这里的路径数组
  const homePaths = ['/', '/index.html'];
  // 获取当前页面的路径部分
  const currentPath = window.location.pathname;
  // 判断当前路径是否在首页路径列表里
  return homePaths.includes(currentPath);
}

如果你的首页有其他特殊路径（比如/home），直接把对应的路径加到homePaths数组里就行。

2. 结合滚动触发逻辑 #

接下来把首页判断和你原来的滚动弹窗逻辑结合起来，同时建议加一个标记位避免弹窗被重复触发（比如用户来回滚动时不会多次弹出）。完整的代码示例如下：

$(document).ready(function() {
  // 标记弹窗是否已经显示过，防止重复触发
  let hasModalShown = false;

  // 首页判断函数
  function isHomePage() {
    const homePaths = ['/', '/index.html'];
    return homePaths.includes(window.location.pathname);
  }

  // 监听滚动事件
  $(window).scroll(function() {
    // 先做前置判断：不是首页 或者 弹窗已经显示过，直接跳过
    if (!isHomePage() || hasModalShown) {
      return;
    }

    // 这里是你原来的滚动高度判断，替换成你实际设定的触发像素值
    const triggerScrollHeight = 500;
    const currentScrollTop = $(window).scrollTop();

    // 满足滚动高度条件时显示弹窗
    if (currentScrollTop >= triggerScrollHeight) {
      // 替换成你实际的弹窗显示逻辑，比如show()或者fadeIn()
      $('#your-modal-id').fadeIn();
      // 标记弹窗已显示，避免再次触发
      hasModalShown = true;
    }
  });
});

额外提示 #

• 如果你的网站是单页应用（SPA），可能需要根据路由变化重新判断首页状态，这时候可以监听路由变化事件，再重新绑定或调整滚动逻辑。
• 如果首页URL带有参数（比如/?ref=home），可以结合window.location.search来补充判断，但这种情况比较少见。

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