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

Question

下面的大部分工作..

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

Answer 1

// 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();

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

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

javascript

jquery

parallax

screen-resolution