如何用jQuery检测滚动高度并根据滚动区域切换页面顶部标题

你的思路非常靠谱，通过标记每个区域的最后一个列表项来触发标题切换是很清晰的方案，下面我给你拆解具体的实现步骤，从结构到交互都安排得明明白白：

1. 先搭好HTML结构 #

首先你需要一个固定在顶部的标题元素，以及包含不同国家店铺的列表，按照你的要求给每个区域的最后一个li加上对应的类名：

<!-- 固定在顶部的区域标题 -->
<h1 id="region-title">UK</h1>

<!-- 店铺列表容器 -->
<ul class="store-list">
  <!-- UK 区域店铺 -->
  <li>伦敦牛津街店</li>
  <li>曼彻斯特市中心店</li>
  <li class="uk-last">爱丁堡王子街店</li>
  
  <!-- US 区域店铺 -->
  <li>纽约第五大道店</li>
  <li>洛杉矶好莱坞店</li>
  <li class="us-last">芝加哥密歇根大道店</li>
  
  <!-- JP 区域店铺 -->
  <li>东京银座店</li>
  <li>大阪心斋桥店</li>
  <li class="jp-last">京都四条河原町店</li>
</ul>

2. 基础样式配置 #

给标题设置固定定位，确保滚动时始终可见；给列表项设置足够的高度，让页面能产生滚动效果：

/* 固定顶部标题 */
#region-title {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 1rem;
  margin: 0;
  background-color: #fff;
  border-bottom: 1px solid #e5e7eb;
  z-index: 10; /* 确保标题在最上层 */
}

/* 给店铺列表项设置高度，方便滚动测试 */
.store-list li {
  height: 350px;
  padding: 2rem;
  border-bottom: 1px solid #f3f4f6;
  display: flex;
  align-items: center;
  font-size: 1.2rem;
}

/* 给列表添加上边距，避免内容被固定标题遮挡 */
.store-list {
  margin-top: 70px;
  padding-left: 0;
  list-style: none;
}

3. JavaScript交互实现 #

这里推荐用Intersection Observer API，它比传统的scroll事件监听更高效，只会在元素进入/离开视口时触发回调，不会频繁占用性能。

核心代码： #

// 获取标题元素和各个区域的标记节点
const regionTitle = document.getElementById('region-title');
const ukLast = document.querySelector('.uk-last');
const usLast = document.querySelector('.us-last');
const jpLast = document.querySelector('.jp-last');

// 配置观察者参数：当元素50%进入视口时触发
const observerConfig = {
  root: null, // 以浏览器视口作为根容器
  rootMargin: '0px',
  threshold: 0.5
};

// 观察者回调函数：处理标题切换逻辑
const handleIntersection = (entries) => {
  entries.forEach(entry => {
    // 当元素进入视口时切换标题
    if (entry.isIntersecting) {
      switch(true) {
        case entry.target.classList.contains('uk-last'):
          regionTitle.textContent = 'US';
          break;
        case entry.target.classList.contains('us-last'):
          regionTitle.textContent = 'JP';
          break;
        case entry.target.classList.contains('jp-last'):
          regionTitle.textContent = 'JP';
          break;
      }
    }
    // 处理反向滚动的情况：滚动回上一级区域时恢复对应标题
    else {
      // 计算各元素相对于视口的位置
      const ukRect = ukLast.getBoundingClientRect();
      const usRect = usLast.getBoundingClientRect();
      
      if (ukRect.bottom > window.innerHeight / 2) {
        regionTitle.textContent = 'UK';
      } else if (usRect.bottom > window.innerHeight / 2 && ukRect.bottom < 0) {
        regionTitle.textContent = 'US';
      }
    }
  });
};

// 创建观察者实例并开始监听标记元素
const observer = new IntersectionObserver(handleIntersection, observerConfig);
observer.observe(ukLast);
observer.observe(usLast);
observer.observe(jpLast);

兼容性备选方案（旧浏览器兼容） #

如果需要兼容不支持Intersection Observer的旧浏览器，可以用scroll事件结合getBoundingClientRect()来实现：

const regionTitle = document.getElementById('region-title');
const ukLast = document.querySelector('.uk-last');
const usLast = document.querySelector('.us-last');
const jpLast = document.querySelector('.jp-last');

// 更新标题的核心逻辑
function updateRegionTitle() {
  const ukRect = ukLast.getBoundingClientRect();
  const usRect = usLast.getBoundingClientRect();
  const jpRect = jpLast.getBoundingClientRect();
  const viewportMid = window.innerHeight / 2;

  // 根据元素位置判断当前区域
  if (ukRect.top <= viewportMid && ukRect.bottom > viewportMid) {
    regionTitle.textContent = 'US';
  } else if (usRect.top <= viewportMid && usRect.bottom > viewportMid) {
    regionTitle.textContent = 'JP';
  } else if (jpRect.top <= viewportMid) {
    regionTitle.textContent = 'JP';
  } else {
    regionTitle.textContent = 'UK';
  }
}

// 监听滚动事件
window.addEventListener('scroll', updateRegionTitle);
// 页面加载时初始化一次标题
updateRegionTitle();

一些优化建议 #

• 可以调整threshold参数或者视口中间的判断位置，让标题切换的时机更符合你的需求；
• 如果店铺列表项高度不固定，建议用Intersection Observer方案，它能更准确地判断元素可见性；
• 可以给标题切换添加过渡动画，让交互更流畅：比如给#region-title加上transition: all 0.3s ease;

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