스크롤 포인트 (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(); 

주제 오프