스크롤이 감지 될 때의 ScrollTop

Question

이 페이지의 것과 같은 기능을 만들고 싶습니다. B&O BeoPlay A3

아래로 스크롤하면 자동으로 다음 페이지로 스크롤됩니다.

나는 window.pageYOffset으로 놀고있다. 지금까지이 있습니다

window.onscroll = scroll; 

     function scroll() { 
      setTimeout(function() { 
       if (window.pageYOffset < 100 && window.pageYOffset > 2) { 
        scrollLogin(); 
       } 
       else if (window.pageYOffset > 100 && window.pageYOffset < 159 && window.pageYOffset != 124) { 
        scrollSky(); 
       } 
       else if (window.pageYOffset > 159 && window.pageYOffset < 248) { 
        scrollCity(); 
       } 
      },500); 
     } 
     function scrollLogin() { 
      $('html,body').animate({ 
       scrollTop: $("#login").offset().top 
      }, 500); 
     } 
     function scrollSky() { 
      $('html,body').animate({ 
       scrollTop: $("#skyContainer").offset().top 
      }, 500); 
     } 
     function scrollCity() { 
      $('html,body').animate({ 
       scrollTop: $("#city").offset().top 
      }, 500); 
     } 

문제는이 방법이 전혀 원활한 작동하지 않는 것입니다. 나는 다시 스크롤 할 때까지 500ms를 기다려야한다. 그리고 이것이 고정 된 화면 해상도에서만 작동한다면. 이 기능을 더 효과적으로 보관하는 방법을 알고 계십니까? 그것은 또한 다른 해상도 모니터에서 작동하도록 비율 측정을 허용합니까?

Link to my attempt.

뷰포트가 위쪽 (로그인 막대), 가운데 (하늘 애니메이션) 및 아래쪽 (검색 막대)로 고정되도록 3 가지 상태가 필요합니다.

대단히 감사합니다!

편집 :

TAKE 2 :

내가 애니메이션이 종료되면 알려줍니다 변수를했다. 애니메이션이 켜져있는 동안에는 단순히 '1'값을 가지므로 모든 종류의 혼란이 방지됩니다.

그래서 스크립트가 꽤 잘 작동합니다. 유일한 catch는 내 innerHeight 및 innerWidth에서만 작동한다는 것입니다. (innerHeight : 863 - innerWidth : 1440).

window.pageYoffset을 백분율로 표시하는 방법이 있습니까? 이 효과를 보관하는 가장 좋은 방법입니까?

감사합니다. 좋은 하루 보내십시오.

이 나의 새로운 코드 :

window.onscroll = scroll; 

     var animationIsOn = 0; 

     function scroll() { 
      if (animationIsOn == 0) { 
       var pageY = window.pageYOffset; 
       if (pageY < 119 && pageY > 69) { 
        scrollLogin(); 
       } 
       else if (pageY > 5 && pageY < 69 || pageY > 179 && pageY < 254) { 
        scrollSky(); 
       } 
       else if (pageY > 129 && pageY < 179) { 
        scrollCity(); 
       } 
      } 
     } 
     function scrollLogin() { 
      animationIsOn = 1; 
      $('html,body').animate({ 
       scrollTop: $("#login").offset().top 
      }, 500, function() { 
       animationIsOn = 0; 
      }); 
     } 
     function scrollSky() { 
      animationIsOn = 1; 
      $('html,body').animate({ 
       scrollTop: $("#skyContainer").offset().top 
      }, 500, function() { 
       animationIsOn = 0; 
      }); 
     } 
     function scrollCity() { 
      animationIsOn = 1; 
      $('html,body').animate({ 
       scrollTop: $("#city").offset().top-600 
      }, 500, function() { 
       animationIsOn = 0; 
      }); 
     } 

Answer 1

백분율로 pageYOffset을 얻으려면, 단순히 document.documentElement.scrollHeight에 의해 pageYOffset를 분할하고 100

편집 곱 : Ckrill이 발견 한 그가 문서의 scrollHeight 속성이 아닌 window.innerHeight를 사용해야합니다.