[Javascript] Cover Up Scrolling layout. [스크롤시 덮이는 레이아웃]

[완성본 Complete]
https://nam-h-j.github.io/cover_up_scroll_layout/index.html

 

 

[잡설 Small talks]

정확한 레이아웃 명칭을 몰라서 구글링 실패
이벤트 관련 소스코드가 제이쿼리로 구현하는게 너무 많아서 참고하기가 어려웠음
10시간 정도 삽질..(absolute 로 하려다가 개망함)
보통 CSS에 fixed 속성 만 주면 매우 쉽게 만들 수 있지만 덮이는 효과가 나오는 레이아웃이 스크롤 되다가 중간에 나타나야 했음..
라이브러리 사용하는게 정신건강에 좋지만.. 뿌듯...^^...

 

 

[Code]

//변수
var bodyElem = document.body,// 전체 바디
      fixedArea = document.querySelector('.fixed_area'), //고정되어야 하는 레이아웃 전체
      coverArea = document.querySelector('.cover_area'), //덮을 레이아웃 전체
      bg1 = document.querySelector('#bg1'), //고정 레이아웃이 스크롤 되어야 하는 레이아웃

      fixedHeight = fixedArea.clientHeight, //고정 레이아웃의 전체 높이
      bg1Height = bg1.clientHeight, //스크롤 되어야 하는 레이아웃의 높이
      coverHeight = coverArea.clientHeight, //덮어야 하는 레이아웃의 높이

      //총 스크롤 되어야 하는 양(고정레이아웃 높이 + 덮을 레이아웃 높이)
      totalScroll = fixedHeight + coverHeight, 
      //스크롤 업다운 확인을 위한 이전 스크롤 위치 값을 넣어둘 변수
      beforeScrollPos = 0, 
      //스크롤 다운 업을 식별해줄 변수
      scrollStatus = 0;


      //덮을 레이아웃의 top 크기 설정(고정 레이아웃 크기만 큼 떨어뜨려 놓기)
      coverArea.style.top = fixedHeight + 'px';


      //스크롤 업다운을 확인하기 위한 함수
      var getScrollDirection = function(scrollPos){
        if(beforeScrollPos < scrollPos){
          scrollStatus = 0
        }else{
          scrollStatus = -1;
        }
      }

      //총 스크롤 되어야할 양을 바디에 적용
      bodyElem.style.height = totalScroll + 'px';

      //스크롤 이벤트
      window.addEventListener('scroll', function(e){
        scrollPos = window.pageYOffset;//스크롤 위치를 가져옴
        getScrollDirection(scrollPos);//스크롤 위치를 보내서 업 스크롤, 다운 스크롤 확인

        //if => 현재 스크롤이 고정레이아웃의 스크롤 범위안에 있는지 판별
            //고정 레이아웃 내부에 있다면 top값을 빼서 고정된 화면을 위로 올림
        //else if => 스크롤을 다운할때, 다운 스크롤 범위까지 도달했는지 판별
            //덮여야하는 레이아웃을 화면 최상단 위치로 고정
        //else if => 스크롤을 업 할때, 최상단 범위까지 도달했는지 판별
            //고정레이아웃의 최상단을 브라우저 최상단에 고정
        if(scrollPos > 0 && scrollPos < bg1Height){ 
          fixedArea.style.top = -scrollPos + 'px'; 
        }else if(scrollPos > bg1Height && scrollStatus === 0){ 
          fixedArea.style.top = -bg1Height + 'px'; 
        }else if(scrollPos < 30 && scrollStatus === -1){ 
          fixedArea.style.top = 0 + 'px'; 
        }

        //현재 스크롤을 위치를 저장해서 업 다운 판별시 비교할 값
        beforeScrollPos = scrollPos;
      });

• 스크롤 이벤트에서 두가지 else if 조건을 추가한 이유는 스크롤을 빠르게 올리고 내리다 보면 원하는 위치에 고정이 안됨
• 그래서 스크롤 업인지 다운인지 판별해야 했고, 범위안에 들어오면 top 값을 고정시켜서 제대로 보이도록 함