[Javascript] header 스크롤 방향 이벤트 제거하기

 

포트폴리오 반응형을 들어가보니 이것저것 신경쓸게 많았다.

이번 포스팅의 주제도 원래는 아무 생각없이 반응형을 완성 시켰다는 거에 만족하면서 즐겁게 쭈꾸미를 먹다가

문득 생각이 나서 휴대폰을 열어 포폴의 모바일 버전을 살펴보고 문제점을 발견했다.

 

내가 PC버전을 제작하면서 한눈에 한 페이지를 볼 수 있도록 스크롤을 내릴시에는 header가 숨겨지도록 했고

다른 페이지로 이동하기 위해 스크롤을 올릴때 header가 보여지도록 만들었다.

그런데 이게 모바일에서도 필요한건지 문득 생각이 난거다.

가끔 그런 모바일 페이지도 본것같지만 보통의 모바일 페이지는 항상 상단이나 하단에 메뉴가 자리잡고 있다.

 

그래서 일단 이 이벤트를 어떻게 없앨지 script.js를 열어보았다.

$(function() {
  var prevScrollTop = 0;

  document.addEventListener("scroll", function(){
      
      var nowScrollTop = $(window).scrollTop(); //현재 스크롤 위치를 nowScrollTop 에 저장
      
      if (nowScrollTop > prevScrollTop){ $('header').addClass('active'); } 
      // 스크롤 방향(Down) 내릴때 -> 헤더에 active 클래스 추가
      else { $('header').removeClass('active'); } 
      // 스크롤 방향(Up) 올릴때 -> 헤더에 active 클래스 제거
      prevScrollTop = nowScrollTop;  
      // prevScroll, nowScrollTop 조건 판단 후, 현재 스크롤값을 prevScrollTop 에 저장

  });

});

자스초보인 나는 일단 구글링부터 시작했다. 

'js 반응형', 'js 반응형 이벤트 삭제' ... 등등

break문도 한번 살펴보고 한번 작성도 해봤다가 실패....

 

그러다 문득, 단순하게 생각해보자 하면서

만약.... window사이즈가... 모바일 사이즈일때? header의 acitive클래스는 제거된다.

를 적어보자고 생각하고

 

다음과 같이 작성해봤다.

 

$(function() {
  var prevScrollTop = 0;

  document.addEventListener("scroll", function(){
      
      var nowScrollTop = $(window).scrollTop(); //현재 스크롤 위치를 nowScrollTop 에 저장
      
      if (nowScrollTop > prevScrollTop){ $('header').addClass('active'); } 
      // 스크롤 방향(Down) 내릴때 -> 헤더에 active 클래스 추가
      else { $('header').removeClass('active'); } 
      // 스크롤 방향(Up) 올릴때 -> 헤더에 active 클래스 제거
      prevScrollTop = nowScrollTop;  
      // prevScroll, nowScrollTop 조건 판단 후, 현재 스크롤값을 prevScrollTop 에 저장

      if (window.innerWidth < 1400) {
          
        $('header').removeClass('active');
      
      }

  });

});

놀랍게도 도전은 성공적...!

아직 도메인에 올려서 모바일 기기에서는 확인은 못해봤지만 브라우저에서 사이즈를 줄였을때는 스크롤을 해도 항상 상단에 떠있도록 설정되었다.

안되면...다시 이글에 이어서...작성할....것....ㅜ