javascript - 滚动点触发的更稳定版本(jQuery/JS)

下面大部分工作。

它可以在较小的显示器和笔记本电脑上正确解析...正确触发元素在滚动点上淡入。问题。 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();