스크롤시 헤더 고정

안녕하세요

스크롤시 헤더를 고정시키는 방법을 알아보겠습니다.

일반적인 웹사이트에서 중간에 lnb 영역을 고정시키고 싶을 때 자주 사용합니다.

 

예제를 통해 알려드리겠습니다.

먼저 html은

---

 <div id="header">
 	header
 </div>
 <div id="lnb">
   <ul>
     <li>메뉴1</li>
     <li>메뉴2</li>
     <li>메뉴3</li>
     <li>메뉴4</li>
   </ul>
 </div>
 <div id="container">
 	container
 </div>

---

이렇게 작성을 해주시고요

header 부분이 나중에 lnb 영역을 만났을 때 헤더를 fixed로 고정시킬 겁니다.

 

css는

---

#header{width: 100%; height:600px; line-height: 600px; font-size: 60px; background:red; transition: background 0.6s; text-align: center;}
#lnb.fixed{position: fixed; left: 0; top: 0; width: 100%;}
#lnb ul{font-size:0; line-height: 0; background: yellow;}
#lnb li{display: inline-block; vertical-align: top; width: 25%; padding: 20px 0; font-size: 25px; text-align: center;}
#container{width:100%; height:1500px; line-height: 1500px; font-size: 60px; background: blue; text-align: center;}

---

이런식으로 작성을 해주시고

각 영역별 구분을 위해서 배경을 빨간색, 노란색, 파란색으로 적용했습니다.

 

그리고 가장 중요한 js는

---

var lnb = $("#lnb").offset().top;
$(window).scroll(function() {
  	var window = $(this).scrollTop();

    if(lnb <= window) {
      $("#lnb").addClass("fixed");
    } else {
      $("#lnb").removeClass("fixed");
    }
})

---

먼저 lnb의 offset().top을 구하면 window를 기준으로 위에서부터의 길이를 가져옵니다.

 

그다음 window가 scroll했을 경우에 이벤트가 발생하게 하고

window라는 변수에다가 현재 window의 scrollTop() 위치를 구해줍니다.

이 scrollTop 위치가 lnb영역의 top 위치보다 같거나 커질경우 lnb 영역에다가 fixed라는 클래스를 부여해서

헤더를 고정시키는 원리입니다.

 

여기서 중요한 점은 변수 lnb를 꼭 window의 scroll 이벤트 밖에 만드셔야합니다. 이유는 lnb 영역을 fixed를 시키게 되면 영역 자체가 사라지기 때문에 기존 top의 위치가 0이 되게됩니다.

그래서 기존의 top 위치를 기억해 주기 위해 scroll 이벤트가 발생하기 전에 변수에 넣어주는 것입니다.

 

 

See the Pen VOEgoL by juyeol (@juyeol) on CodePen.

 

감사합니다.