基于滚动切换类：无需jQuery，纯原生JS实现Waypoints滚动效果

嘿，作为JS新手想摆脱jQuery实现这个滚动效果完全没问题！我来帮你用原生JavaScript复刻你原来用Waypoints做的功能——监听.Logo-waypoint元素（关联你的.intro区块）进入/退出视口的状态，然后切换页眉logo的尺寸类。

核心方案：使用Intersection Observer API #

原生的Intersection Observer API是专门用来监听元素与视口（或其他容器）交叉状态的API，比自己写scroll事件+getBoundingClientRect()高效得多（浏览器会优化触发时机，避免频繁计算），完美替代Waypoints的Inview功能。

完整实现代码 #

// 获取所有需要监听的Waypoint元素
const waypointElements = document.querySelectorAll('.Logo-waypoint');
// 获取需要修改的页眉元素
const header = document.querySelector('.kracked-header');

// 记录上一次滚动位置，用于判断滚动方向（可选）
let lastScrollY = window.scrollY;

// 创建Intersection Observer实例
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    // 判断滚动方向（如果不需要区分方向，可以删掉这部分）
    const scrollDirection = window.scrollY > lastScrollY ? 'down' : 'up';
    lastScrollY = window.scrollY;

    // 元素进入视口时（对应Waypoints的entered回调）
    if (entry.isIntersecting) {
      // 移除页眉的小尺寸类（替换成你实际需要的类名）
      header.classList.remove('kracked-header-small');
      // 如果需要根据方向做不同处理：
      // if (scrollDirection === 'down') { /* 向下滚动进入的逻辑 */ }
    } 
    // 元素退出视口时（对应Waypoints的exited回调）
    else {
      // 添加页眉的小尺寸类（替换成你实际需要的类名）
      header.classList.add('kracked-header-small');
      // 如果需要根据方向做不同处理：
      // if (scrollDirection === 'down') { /* 向下滚动退出的逻辑 */ }
    }
  });
}, {
  // 触发时机：0表示元素边缘刚接触视口就触发，可根据需求调整（比如0.5=元素一半进入视口）
  threshold: 0,
  // 如果滚动容器不是视口，可以设置root属性，比如document.querySelector('.scroll-container')
});

// 给每个Waypoint元素添加监听
waypointElements.forEach(element => {
  observer.observe(element);
});

代码解释 #

1. 元素选择：用document.querySelectorAll和document.querySelector替代jQuery的$选择器，获取目标元素。
2. Intersection Observer配置：
   • threshold：控制触发回调的时机，0是最灵敏的（元素刚进入/离开视口就触发），你可以改成0.5（元素一半在视口内时触发）。
   • 回调函数中的entries是所有被监听元素的状态数组，每个entry的isIntersecting属性直接告诉你元素是否在视口内。
3. 滚动方向判断（可选）：如果你需要像Waypoints那样区分滚动方向（向下/向上进入视口），可以通过记录lastScrollY来判断，然后在回调中做针对性处理。
4. 类操作：用classList.add()和classList.remove()替代jQuery的addClass/removeClass，这是原生DOM的标准方法。

注意事项 #

• 替换代码中的kracked-header-small为你实际需要添加/移除的页眉类名，和原来jQuery代码中的保持一致。
• 如果你的页面有动态加载的.Logo-waypoint元素，记得在元素加载完成后调用observer.observe(newElement)来添加监听。
• Intersection Observer支持所有现代浏览器，如果你需要兼容IE，可以加个polyfill（不过现在IE基本被淘汰了，一般不需要）。

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