스크롤 이벤트로 만드는 재밌는 기능들

window.addEventListener('scroll',function{
        
      })

 window(현재 html 페이지) 가 스크롤 될 때 마다 다음 코드를 실행

 

숙제) 스크롤을 100 내리면 폰트 사이즈가 줄어들게 만들기

 

숙제2) 회원 약관 박스만들고 다 읽었는지 

 

 

//숙제1

$(window).on('scroll',function(){
          var a = window.scrollY;
          if (a >= 100){
            $('.navbar-brand').css('font-size','10px')
          } else {
            $('.navbar-brand').css('font-size','20px')

          }
          
        });

 

//숙제2

  $('.lorem').on('scroll',function(){
          var scroll = document.querySelector('.lorem').scrollTop;
          var height = document.querySelector('.lorem').scrollHeight;
          // 스크롤 양의 크기
          var boxHeight = document.querySelector('.lorem').clientHeight;
          // 스크롤 박스 자체의 크기
          if (scroll+boxHeight+3 >= height) {
            alert('agree?')
          }
        })

 

전체 스크롤의 크기와 스크롤을 한 크기가 같으면 다 내렸다고 판단할수 있음 

근데 scrollerTop 메소드는 위가 기준으로 다 내려도 스크롤 박스의 크기만큼이 남음 

그래서 전체 스크롤의 크기는 scrollerTop+스크롤 박스의 크기임

 

또한 scrollerTop에 약간의 오차가 발생하기 때문에 +3을 하여 어느정도 오차는 무마할수 있음

 

추가응용) 전체 스크롤 퍼센트에 따른 스크롤바 만들기

 

전체 스크롤을 %로 표현해야한다. 

(내린길이/전체길이)* 100 하면 된다. 

 

 $(window).on('scroll',function(){
          var a = ($(window).scrollTop() / ($(document).height() - $(window).height()) * 100);
          
          $('.bar').css('width',`${a}`+'%')
         });

완성