[ jquery 응용 ] 스크롤 시 상단 고정 메뉴 만들기

 

사이트를 제작하거나 컨텐츠를 제작할때 자주 사용되는

스크롤 할때 브라우저 상단에 고정되는 메뉴를 만들어 볼까 합니다.

 

 

최초부터 상단에 붙어 있는 메뉴도 있겠지만,

저는 중간에 고정이 될 메뉴가 있는 영역이 상단에 붙으면 

그때부터 고정되어 같이 내려오는 형태로 제작을 해보려 합니다.

 

 

 

HTML 코드

---

<div class="header">
    스크롤 상단 메뉴 고정하기
</div>
<div class="tabs">
    <div class="tab">menu 1</div>
    <div class="tab">menu 2</div>
    <div class="tab">menu 3</div>
    <div class="tab">menu 4</div>
</div>
<div class="contents">
    스크롤 영역
</div>

 

html 코드는 우선 페이지에 대한 구조를 설정합니다.

상단에는 header라는 클래스를 가진 영역에 텍스트가 있고,

그 밑에 tabs라는 div영역을 메뉴라고 생각하고 해당 영역을

스크롤 시 고정되는 영역으로 만들어 보려합니다.

그리고 contents라는 영역은 충분한 스크롤이 가능하게끔

height값을 만들어주기 위한 영역입니다.

 

 

현재까지의 미리보기는 그냥 html만 넣었기 때문에

화면상에 텍스트만 나오는걸 확인 할 수 있습니다.

 

 

미리보기

 

 

 

CSS 코드

---

<style>
    * {margin: 0; padding: 0;}
    .header {
        background: #000; 
        color: #fff; 
        font-size: 30px; 
        font-weight: bold; 
        text-align: center; 
        padding: 100px 0;
    }
    .tabs {
        width: 100%;
        background: #1490ca;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .tabs.fixed {
        position: fixed;
        top: 0;
        left: 0;
    }
    .tabs .tab {
        padding: 20px 30px;
        color: #fff;
        font-size: 20px;
        font-weight: bold;
    }
    .contents {
        height: 200vh; 
        background: linear-gradient(180deg, rgba(158,158,158,1) 0%, rgba(255,255,255,1) 100%);
    }
</style>

 

스타일은 우선 제일 처음 '*'에 준 내용은

페이지 전체에 대한 마진과 패딩값을 제거하기 위해 넣었습니다.

객체 사이사이 간격이 기본적으로 있는 부분을 제거하기 위함입니다.

 

 

그리고 header부분은 배경을 검은색을 두고 흰색의 큰 글씨를 중앙에 배치하였고

tabs 영역은 파란색의 배경색을 두고,

display: flex를 이용해 자식객체인 tab들의 위치를 잡아주었습니다.

tab은 패딩으로 어느정도의 크기를 잡고 폰트 설정을 해주었습니다.

 

 

그리고 tabs에 fixed 클래스를 같이 사용한 곳에는

추후 jquery에서 클래스값을 조건에 맞추어 추가하고 뺄 

클래스를 미리 잡아 스타일을 적용해두었습니다.

기본일때는 없던 position값을 fixed를 주어

상단에 고정시키기 위한 클래스 스타일 입니다.

 

 

마지막으로 contents는 스크롤을 위한 height값과 

스크롤 시 액션을 보기 위한 그라디언트 배경색을 잡아주었습니다.

 

 

미리보기

 

 

 

jquery 코드

---

<script>
    $(document).ready(function(){
        var tabsTop = $('.tabs').offset().top;

        $(window).scroll(function(){
            if($(this).scrollTop() >= tabsTop) {
                $('.tabs').addClass('fixed');
            } else {
                $('.tabs').removeClass('fixed');
            }
        });
    });
</script>

 

해당 내용 작성 전 jquery를 사용하기 위해

미리 cdn방식으로 적용해주시고, 그 뒤 스크립트를 작성해 주세요.

 

 

document가 준비 완료가 되면,

우선 tabs클래스 영역의 상단 위치값을

tabsTop이라는 변수에 저장해 둡니다.

 

 

 

 

해당 부분이 궁금하다면 

console.log를 이용해 값을 찍어보고 

브라우저의 개발자 도구를 이용해 확인해 보세요.

 

 

 

 

콘솔창에 240 이라는 숫자가 찍힌게 확인 되실껍니다.

이로 알 수 있는 내용은

tabs의 상단 위치는 브라우저 최상단으로부터 240이 떨어져 있습니다.

 

 

그다음 scroll을 할때 상단의 값이

방금전 구해놓은 tabs의 상단값보다

크거나 같다면 실행되는 함수를 하나 만듭니다.

결과가 true라면 tabs라는 객체에 추가로 fixed라는 클래스를 부여하고,

반대로 결과가 false라면 객체에서 부여된 fixed를 제거하는 내용입니다.

 

 

미리보기

 

 

미리보기와 같이 상단에 원하는 위치부터

원하는 내용만 딱 고정되어 잘 따라다니는 것을 확인 할 수 있습니다.

 

 

현재 내용은 클래스를 추가하는 방식을 사용하였지만,

jquery상에서 직접 스타일을 주었다가 제거하는 방식을

사용하여도 충분히 동일하게 구현이 가능합니다.

 

 

 

 

전체 코드

---

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
    * {margin: 0; padding: 0;}
    .header {
        background: #000; 
        color: #fff; 
        font-size: 30px; 
        font-weight: bold; 
        text-align: center; 
        padding: 100px 0;
    }
    .tabs {
        width: 100%;
        background: #1490ca;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .tabs.fixed {
        position: fixed;
        top: 0;
        left: 0;
    }
    .tabs .tab {
        padding: 20px 30px;
        color: #fff;
        font-size: 20px;
        font-weight: bold;
    }
    .contents {
        height: 200vh; 
        background: linear-gradient(180deg, rgba(158,158,158,1) 0%, rgba(255,255,255,1) 100%);
    }
</style>
<div class="header">
    스크롤 상단 메뉴 고정하기
</div>
<div class="tabs">
    <div class="tab">menu 1</div>
    <div class="tab">menu 2</div>
    <div class="tab">menu 3</div>
    <div class="tab">menu 4</div>
</div>
<div class="contents">
    스크롤 영역
</div>
<script>
    $(document).ready(function(){
        var tabsTop = $('.tabs').offset().top;
        console.log(tabsTop);

        $(window).scroll(function(){
            if($(this).scrollTop() >= tabsTop) {
                $('.tabs').addClass('fixed');
            } else {
                $('.tabs').removeClass('fixed');
            }
        });
    });
</script>