[웹 개발] 스크롤 방향 판별 및 스크롤 내릴 때에만 헤더 감추기

 

 

pageYOffset으로 스크롤 방향 판별하기

 

스크롤 방향 판별을 하기 위해 사용할 수 있는 여러 내장 프로퍼티들이 있지만 그중에 크로스 브라우징 문제가 없는 pageYOffset을 이용한 방법을 소개하겠습니다. 이것도 IE8이하에서는 작동하지 않지만, 저 정도의 구버전은 굳이 챙기지 않도록 하겠습니다. 

 

먼저, 스크롤이 발생 중인 상태를 탐지하는 이벤트 리스너가 필요합니다. 이에 따라 필요한 이벤트는 "scroll" 입니다. 만들어야 하는 코드는 "scroll" 이벤트를 등록하는 이벤트 리스너와 이벤트가 발생할 때마다 호출될 이벤트 핸들러(콜백 함수)입니다.

 

* 예시 코드

var prevScrollTop = 0;
document.addEventListener("scroll", function(){
    var nextScrollTop = window.pageYOffset || 0;
    if (nextScrollTop > prevScrollTop){
        // 스크롤 내리는 중에 실행코드
    } else if (nextScrollTop < prevScrollTop) {
        // 스크롤 올리는 중에 실행코드
    }
    prevScrollTop = nextScrollTop;
});

 

pageYOffset 이 0일 때가 가장 최상단 위치입니다.

스크롤 이벤트 발생하면 nextScrollTop에 현재 pageYOffset 값을 넣고 기존에 pageYOffset값을 넣어두었던 prevScrollTop과 대소 비교하여 스크롤 방향을 판별합니다.

 

 

 

스크롤 내릴 때에만 헤더 감추기

 

위 예시코드에서 내리는 중에는 헤더를 감추는 코드를 실행하고 올리는 중에는 다시 헤더가 나타나는 코드를 실행하면 됩니다. 그런데 우리에게는 Javascript 말고 CSS라는 또 다른 무기가 있습니다. 헤더가 나타나고 사라지는 애니메이션은 CSS로 간편하게 처리하려고 합니다. 이것을 위해서 자바스크립트에서는 헤더의 class명만 변경해주면 됩니다.

 

* Javascript 예시 코드

var header = document.querySelector('header');
var headerMoving = function(direction){
    if (direction === "up"){
        header.className = '';
    } else if (direction === "down"){
        header.className = 'scrollDown';
    }
};
var prevScrollTop = 0;
document.addEventListener("scroll", function(){ 
    var nextScrollTop = window.pageYOffset || 0; 
    if (nextScrollTop > prevScrollTop){
        headerMoving("down");
    } else if (nextScrollTop < prevScrollTop){
        headerMoving("up");
    }
    prevScrollTop = nextScrollTop;
});

 

HTML, CSS까지 추가하여 완성된 코드는 다음과 같습니다.

CSS 애니메이션은 transform과 transition으로 처리했습니다.

 

 

  See the Pen https://codepen.io/cocoder16/pen/WNQvGKN">
  WNQvGKN by cocoder16 (https://codepen.io/cocoder16">@cocoder16)
  on https://codepen.io">CodePen.