$（window）.scroll在if語句中執行，即使它不符合條件時

我使用debounce script作爲條件的一部分，當用戶滾動頁面時將向側邊菜單添加一些CSS超過一定數量的像素，然後在從底部開始設置一定數量的像素時隱藏菜單。該腳本按照預期的屏幕寬度992px及以上（根據條件if (debounce_bodyWidth >= 992)）運行，但仍在執行低於此的維度。

有沒有關於$(window).scroll的東西，意思是它執行時不考慮條件？

(function ($) { 
    contactDebounce = function() { 
     var debounce_bodyWidth = $(window).width(); 
     if (debounce_bodyWidth >= 992) { 
      $(window).scroll(function() { 
       var distanceFromBottom = $(document).height() - $(this).scrollTop(); 

       if (distanceFromBottom <= 1200) { 
        $('.sticky-element').addClass('hide'); 
       } else if ($(this).scrollTop() >= 150) { 
        $('.sticky-element').removeClass('hide'); 
        $('.sticky-element').css({ 
         'position': 'fixed', 
         'top': '15px' 
        }); 
       } else if ($(this).scrollTop() < 150) { 
        $('.sticky-element').css({ 
         'position': 'relative', 
         'top': '0' 
        }); 
       } 
      }); 
     } 
    } 
    contactDebounce(); 
    $(window).on("debouncedresize", contactDebounce); 
})(jQuery);

來源

2015-12-14 Luke

你要綁定的滾動事件，每次你的窗口大於992，所以如果你超過992，那麼即使你小於992，它也會被綁定（並觸發）。你想綁定一次，然後把if條件放入事件 – Pete

如果你[調試過此代碼]（http://stackoverflow.com/questions/988363/how-can-i-debug-my-java腳本代碼），你可能很容易就能自己發現它。 – Liam

乾杯皮特。現在我看到它了，我明白了。 – Luke

你在做一個功能結合$(window).scroll在頁面加載如果bodyWidth >= 992，~~這種狀況不會再運行作爲上滾動運行的所有是您所創建的滾動功能裏面。~~

編輯：它已在評論中指出，這是再次運行，反彈調整大小。問題在於，當條件爲真時，滾動函數已經被設置，並且當條件變爲假時不會取消設置。您可以取消設置事件並再次檢查重新調整大小或在事件內添加條件並停止運行重新調整大小的檢查。

試試這個，添加事件中的條件：

(function ($) { 
    contactDebounce = function() { 
     $(window).scroll(function() { 

      var debounce_bodyWidth = $(window).width(); 
      if (debounce_bodyWidth >= 992) { 
       var distanceFromBottom = $(document).height() - $(this).scrollTop(); 
       var stickyElement = $('.sticky-element'); 

       if (distanceFromBottom <= 1200) { 
        stickyElement.addClass('hide'); 
       } else if ($(this).scrollTop() >= 150) { 
        stickyElement.removeClass('hide'); 
        stickyElement.css({ 
         'position': 'fixed', 
         'top': '15px' 
        }); 
       } else if ($(this).scrollTop() < 150) { 
        stickyElement.css({ 
         'position': 'relative', 
         'top': '0' 
        }); 
       } 
      } 
     }); 
    } 

    contactDebounce(); 
})(jQuery);

還是這個，解除綁定時小，重新綁定時更大：

(function ($) { 
    contactDebounce = function() { 
     var debounce_bodyWidth = $(window).width(); 
     if (debounce_bodyWidth >= 992) { 
      $(window).scroll(function() { 
       var distanceFromBottom = $(document).height() - $(this).scrollTop(); 
       var stickyElement = $('.sticky-element'); 
       if (distanceFromBottom <= 1200) { 
        stickyElement.addClass('hide'); 
       } else if ($(this).scrollTop() >= 150) { 
        stickyElement.removeClass('hide'); 
        stickyElement.css({ 
         'position': 'fixed', 
         'top': '15px' 
        }); 
       } else if ($(this).scrollTop() < 150) { 
        stickyElement.css({ 
         'position': 'relative', 
         'top': '0' 
        }); 
       } 
      }); 
     } 
     else 
     { 
      $(window).unbind('scroll'); 
     } 
    } 

    contactDebounce(); 
    $(window).on("debouncedresize", contactDebounce); 
})(jQuery);

來源

2015-12-14 13:44:25 Dhunt

編輯出重複的jQuery選擇器。避免不必要的DOM遍歷是一個好習慣。 – Dropout

同意，我只是看着這個問題，錯過了。謝謝 – Dhunt

我太慢了，不能指出你說的東西，所以我只是想至少有點幫助;） – Dropout

$（window）.scroll在if語句中執行，即使它不符合條件時

回答

相關問題