Javascript 仅执行一次滚动事件

我有一个问题，试图添加css的流行覆盖类后滚动1500像素，但只有一次。在此方面如有任何帮助，将不胜感激

jQuery(window).on("scroll", function(event) {
  if (jQuery(this).scrollTop() > 1500) {
    jQuery('.popbox-overlay').css('display', 'block');
    jQuery(window).scrollTop(0);
  };
  jQuery(this).off(event);
});

试试这个

jQuery(window).on("scroll", function(event) {
  if (jQuery(this).scrollTop() > 1500) {
    jQuery('.popbox-overlay').css('display', 'block');
    jQuery(window).scrollTop(0);
  };
  jQuery(window).off("scroll")
});

---

只需将

off（）

调用移到if条件中即可。下面修改的逻辑使用命名函数在窗口上创建滚动事件侦听器。它还缓存

$（窗口）

，因此只创建一次。然后在逻辑中，当显示覆盖时，它通过使用方法执行

off（）

来删除该事件侦听器。这样，仅删除该事件侦听器。您可以简单地关闭（'scroll'），但这可能会删除更多的事件侦听器

我还为覆盖添加了一个单击事件监听器，这样您可以单击它使其再次隐藏，并看到当您滚动到底部时，它不会再次显示

（函数（$，窗口，未定义）{
让$popboxOverlay=$（'.popbox overlay'）。打开（'click'，函数（e）{
$popboxOverlay.hide（）；
});
让$window=$（window）.on（'scroll'，函数showPopboxOverlay（e）{
如果（$window.scrollTop（）>1500）{
$popboxOverlay.show（）；
$window.scrollTop（0）；
$window.off（'scroll'，showPopboxOverlay）；
}
});
}（jQuery，window））
正文{
最小高度：2000px；
}
.popbox覆盖{
位置：固定；
顶部：5vh；
左：5vw；
宽度：90vw；
高度：90vh；
背景色：rgb（64,64,192）；
颜色：白色；
显示：无；
}

东西
其他东西
最好的方法是使用。这是为像您这样的用例而设计的：当元素进入（或离开）视口时，它监视元素并触发函数。它甚至支持检查一个元素是否与另一个元素相交

首先，您必须设置IO选项并对其进行初始化：

let options = {
  rootMargin: '0px',
  threshold: 1.0
}

let observer = new IntersectionObserver(callback, options);

let targets = document.querySelectorAll('popbox-overlay'); // get each popbox-overlay
targets.forEach(target => { // for each overlay
  observer.observe(target); // we observe it
});
// the callback we setup for the observer will be executed now for the first time
// it waits until we assign a target to our observer (even if the target is currently not visible)

最后一步是定义元素进入视图后实际发生的情况：

let callback = (entries, observer) => {
  entries.forEach(entry => {
    // Each entry describes an intersection change for one observed
    // target element:
    //   entry.boundingClientRect
    //   Your popbox-overlay is in the viewport, do something with it
  });
};

如果你只需要触发一次，你也可以

A以支持不支持此功能的较旧浏览器（即11）。
将
关闭（）
调用移到
if
条件中在满足条件时取消绑定事件，谢谢。虽然.pop overlay是嵌套在其中的一个表单，但我需要.close btn作为关闭.pop overlay div的事件。您知道我需要做什么来实现这一点吗？如果您有一个
.close btn
，您只需为它创建一个单击处理程序，类似于在我的示例中，我通过单击overlay来实现虚拟关闭。不要在单击覆盖图时关闭，而是在单击“关闭”按钮时关闭。嗨，肖恩，我试过了。如果你不介意进一步检查，请检查下面的基本代码jQuery（window）.on（“滚动”），函数（事件）{if（jQuery（this.scrollTop（）>1）{console.log（'run'）；}；jQuery（window）.off（“滚动”）}```