只執行一次滾動事件

Question

我在嘗試在 1500 像素后滾動時將 css 添加到彈出疊加層 class 時遇到問題，但只有一次。 任何幫助將不勝感激。

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

您只需要將off()調用移至if條件。 下面修改后的邏輯使用命名函數在窗口上創建滾動事件偵聽器。 它還緩存$(window)因此只能創建一次。 然后在邏輯中，當顯示疊加層時，它通過使用方法執行off()來刪除該事件偵聽器。 這樣，僅該事件偵聽器將被刪除。 您可以簡單地執行off('scroll')但這可能會刪除比您想要的更多的事件偵聽器。

我還為該疊加層添加了click事件監聽器，因此您可以單擊它以使其再次隱藏，並看到滾動到底部時它不會再次顯示。

 (function($, window, undefined){ let $popboxOverlay = $('.popbox-overlay').on('click', function(e){ $popboxOverlay.hide(); }); let $window = $(window).on('scroll', function showPopboxOverlay(e){ if ($window.scrollTop() > 1500) { $popboxOverlay.show(); $window.scrollTop(0); $window.off('scroll', showPopboxOverlay); } }); }(jQuery, window)); 

 body { min-height: 2000px; } .popbox-overlay { position: fixed; top: 5vh; left: 5vw; width: 90vw; height: 90vh; background-color: rgb(64, 64, 192); color: white; display: none; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <span>Stuff</span> <div class="popbox-overlay"> Other Stuff </div> 

Answer 3

解決這個問題的最佳方法是使用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 的 polyfill以支持不支持此功能的舊瀏覽器（IE 11）。

Answer 4

可以使用純javascript第一次檢查

var firstScrolled = false;

window.onscroll = function(){
        
    if(!firstScrolled)
    {
       // some code
       firstScrolled = true;
    }
};