滚动点触发的更稳定版本(jQuery/JS）

more stable version of trigger by scroll point (jQuery / JS)

本文关键字：版本 jQuery JS 滚动      更新时间：2023-09-26

以下操作有效。。大部分情况下。

它可以在较小的显示器和笔记本电脑上正确解析。。。正确触发元素在滚动点淡入。问题。iMac和大分辨率——滚动点并没有真正读取，因为屏幕太大，所以锚的高度没有被击中。有什么建议可以让以下功能在更大的分辨率下工作吗？不知怎么宣布了%？还有更稳定的吗？

$(window).scroll(function() {
  if ($(this).scrollTop() > 1800 && !breakpoint ) {
     // doStuff();
    // alert('Breakpoint 1500');
    $('.updated').delay(700).fadeIn(2000);
    $('#own_1').delay(700).fadeIn(2000);
    $('#own_2').delay(800).fadeIn(2100);
    $('#own_3').delay(900).fadeIn(2200);
    $('#buy_1').delay(1000).fadeIn(2300);
    $('#shop_1').delay(1100).fadeIn(2400);
    $('#shop_2').delay(1200).fadeIn(2500);
    $('#shop_3').delay(1300).fadeIn(2600);
  }
})

// Declare some variables to reuse them
var $window = $(window),
    $document = $(document),
    limit = 1800;
// Create your function
function myFunction(){
  if (// If we scroll over the limit OR if the window is too high to scroll to the limit
       ($window.scrollTop() > limit || $window.height() >= $document.height() - limit)
       &&
       // AND breakpoint is false
       !breakpoint
   ){
      // Note that for performance you should store these elements in variables
      // oustide this function to avoid searching for them on every call.
      $('.updated').delay(700).fadeIn(2000);
      $('#own_1').delay(700).fadeIn(2000);
      $('#own_2').delay(800).fadeIn(2100);
      $('#own_3').delay(900).fadeIn(2200);
      $('#buy_1').delay(1000).fadeIn(2300);
      $('#shop_1').delay(1100).fadeIn(2400);
      $('#shop_2').delay(1200).fadeIn(2500);
      $('#shop_3').delay(1300).fadeIn(2600);
  }
}
// Bind the function to scroll and resize event
$window.scroll(myFunction).resize(myFunction);
// Execute the function once on load,
// in case the user can't scroll to that point
// and does not resize their browser window
myFunction();
相关文章：