使用jQuery Waypoints时，向下滚动无法移除类/隐藏#projMarker求助

我来帮你搞定这个Waypoints的问题！你遇到的情况是：向下滚动离开#subSolSec区域时，#projMarker无法恢复隐藏，但向上滚动离开时正常——核心问题出在默认Waypoints的触发逻辑和toggleClass的局限性上。

问题原因分析 #

你用toggleClass来切换显示状态，但默认的Waypoint只在元素进入视口的特定位置（比如顶部到达视口）触发一次，并没有监听元素完全离开视口的情况，尤其是向下滚动时，元素底部离开视口的动作没有被捕获到，所以不会触发toggleClass来移除类。而向上滚动时，元素顶部再次经过触发点，会触发第二次toggleClass，从而恢复隐藏。

解决方案：精准监听进入/离开事件 #

我们可以通过设置两个Waypoint，分别监听元素进入视口和离开视口的动作，结合滚动方向来控制类的添加/移除，或者直接使用Waypoints的Inview扩展来简化逻辑。

方案1：不依赖Inview扩展，手动设置触发点

这种方式不需要额外引入插件，通过调整offset参数来覆盖所有滚动场景：

// 当元素进入视口（向下滚动时底部进入，向上滚动时顶部进入），显示标记
$('#subSolSec').waypoint(function(direction) {
  $('#projMarker').addClass('visible');
}, {
  offset: 'bottom-in-view', // 元素底部进入视口时触发
  triggerOnce: false // 允许重复触发
});

// 当元素完全离开视口（向下滚动时顶部离开，向上滚动时底部离开），隐藏标记
$('#subSolSec').waypoint(function(direction) {
  $('#projMarker').removeClass('visible');
}, {
  offset: 'top-out-of-view', // 元素顶部离开视口时触发
  triggerOnce: false
});

对应的CSS保持你的初始设置：

#projMarker {
  display: none;
}
#projMarker.visible {
  display: block;
}

方案2：使用Waypoints的Inview扩展（更简洁）

如果你已经引入了Waypoints的Inview扩展，可以直接监听元素的进入/离开状态：

$('#subSolSec').waypoint({
  handler: function(direction) {
    // 判断元素是否在视口中
    const isInView = this.element.classList.contains('inview');
    $('#projMarker').toggleClass('visible', isInView);
  },
  offset: 0,
  triggerOnce: false
});

为什么这样能解决问题？ #

• 方案1通过两个不同的offset参数，分别捕获元素进入和离开视口的瞬间，不管是向上还是向下滚动，都会触发对应的类操作。
• 方案2利用Inview扩展自动给元素添加/移除inview类，我们只需要根据这个类的存在状态来控制标记的显示/隐藏，逻辑更简洁。

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