只执行一次滚动事件

Question

我在尝试将 css 添加到 1500 像素后滚动时的 pop-overlay 类时遇到问题，但只有一次。任何帮助将不胜感激。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);});

Answer 1

试试这个。

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")

});

Answer 2

解决这个问题的最佳方法是使用Intersection Observer (IO)。这是为像您这样的用例设计的：它监视一个元素并在它进入（或离开）视口时触发一个函数。它甚至支持检查一个元素是否与另一个元素相交。

首先，您必须为 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

  });

};

如果您只需要触发一次，您也可以取消观察元素。

一个来自W3C的填充工具存在，以支持旧的浏览器谁不支持这一（IE 11）。