Javascript (자바스크립트) 활용 - 스크롤시 고정되는 영역 만들기

페이지를 만들 때 탭 메뉴만큼 많이 사용하는게

스크롤과 관련된 스크립트이다.

 

특히 스크롤과 함께 특정 영역을 고정하는 식의 작업이 많이 있다.

 

1. 고정을 시작 할 영역의 좌표 값 구하기

스크롤을 통한 영역 고정을 하려면

우선, 스크롤이 어느 정도에 위치했을 때 고정할 영역을 구할 지에 대한 생각을 해야한다.

<style>
  *{margin:0; padding:0;}
  .wrap{width:1100px; margin:0 auto;}
  .header{height:200px; background:palegreen;}
  .content{position:relative;}
  .content:after{display:block; clear:both; content:'';}
  .main{float:left; margin-right:10px; background:skyblue; width:790px; height:1500px;}
  .wing{overflow:hidden;}
  .wing .inner{width:300px; height:300px; background:plum;}
  /* 스크롤시 고정 될 윙배너 css */
  .wing.fixed .inner{position:fixed; top:0;} 
</style>

<div class="wrap">
  <div class="header">Header</div>
  
  <div class="content">
    <div class="main">Main Area</div>

    <div class="wing">
      <div class="inner">Wing Banner</div>
    </div>
  </div>
</div>

위와 같은 구조로

header와 content 영역이 분리 되어 있고

content 영역 안에 스크롤시 고정 될 윙배너 영역이 있다고 가정할 때

 

표시해놓은 스크롤 기준선의 좌표값을 구해서

그 값을 윈도우 스크롤이 넘어갈 경우에 윙배너에 클래스를 추가해서 fixed 효과를 구현할 수 있다.

const content = document.querySelector('.content');

// 컨텐츠 영역부터 브라우저 최상단까지의 길이 구하기
const contentTop = content.getBoundingClientRect().top + window.scrollY;

main영역과 wing 영역을 품고 있는 content라는 변수를 선언해준 후

해당 영역의 좌표 값을 getBoundingClientRect().top 와 window.scrollY를 더해줘서 구한다.

 

*getBoundingClientRect().top는 뷰포트 상의 좌표값을 나타내고

window.scrollY는 브라우저 최상단에서 부터 현재까지 스크롤 된 좌표 값을 구한다.

 

2. 스크롤이 지정해놓은 좌표 값을 넘어갈 때 클래스 주기 (window.scrollY >= 좌표 값)

위 1번에서 구한 content의 좌표 값을 윈도우 스크롤이 넘어갈 경우

.wing에 클래스를 추가해줘서 fixed 효과를 구현할 수 있다.

const content = document.querySelector('.content');
const wing = document.querySelector('.wing');

// 컨텐츠 영역부터 브라우저 최상단까지의 길이 구하기
const contentTop = content.getBoundingClientRect().top + window.scrollY;

window.addEventListener('scroll', function(){
  if(window.scrollY >= contentTop){
    wing.classList.add('fixed');
  }else{
    wing.classList.remove('fixed');
  }
});

wing이라는 변수를 선언해줘서 클래스를 추가할 영역을 미리 담아둔다.

 

그리고 window에 addEventListener로 'scroll' 이벤트를 걸어준 후

if문을 사용해 1번에서 구한 content 영역의 위치값을 윈도우 스크롤이 넘길 경우에

미리 구해놓은 wing에 fixed 클래스를 추가해준다.

 wing.classList.add('fixed') 

 

 

 

(*CodePen 화면은 0.25x 로 축소해서 확인하시면 수월하게 예시화면을 확인할 수 있습니다.)