[JavaScript30] 📋 24. Sticky Nav

24. 📋 Sticky Nav

스크롤 되면 고정되는 메뉴.

초기 코드

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sticky Nav</title>
    <link rel="stylesheet" href="style_JuneHyung.css">
</head>
<body>
    <header>
        <h1>A story about getting lost.</h1>
    </header>

    <nav id="main">
        <ul>
            <li class="logo"><a href="#">LOST</a></li>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Images</a></li>
            <li><a href="#">Locations</a></li>
            <li><a href="#">Maps</a></li>
        </ul>
    </nav>

    <div class="site-wrap">
        
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate~~</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate~~~</p>
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate~~~</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate~~~</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate~~~</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate~~~</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate~~~</p>
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate~~~</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate~~~</p>
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate~~~</p>

    <img src="http://unsplash.it/400/400" class="align-left slide-in">

   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate~~~</p>

    <img src="http://unsplash.it/400/400" class="align-right slide-in">

   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate~~~</p>



   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate~~~</p>

    <img src="http://unsplash.it/400/400" class="align-right slide-in">

   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate~~~</p>
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate~~~</p>
    </div>
    <script>
        
    </script>
</body>
</html>

초기 화면

🌏 과정

👉 1. 상수, 변수 생성

const nav = document.querySelector('#main');
const topOfNav = nav.offsetTop;

메뉴 영역과 메뉴의 상단 좌표값을 저장해둠.

👉 2. 스크롤시 메뉴를 fixed시킨다.

function fixNav(){
    // console.log(topOfNav, window.scrollY);
    if(window.scrollY >= topOfNav){
        document.body.style.paddingTop = nav.offsetHeight + 'px';
        document.body.classList.add('fixed-nav');
    }else{
        document.body.style.paddingTop = 0;
        document.body.classList.remove('fixed-nav');
    }
}

css 추가내용

fixed-nav에 대한 css를 추가 작성.

.fixed-nav nav{
    position: fixed;
    box-shadow: 0 5px rgba(0,0,0,0.1);
}

.fixed-nav li.logo{
    max-width:500px;
}

메뉴의 최상단이 스크롤의 상단값보다 작을 때 : 즉, 스크롤이 내려갔을 때

fixed-nav라는 클래스를 추가해준다.

아닌경우에 fixed-nav 삭제

로고의 경우 기존의 logo넓이가 0이라 fixed됐을 때 넓이를 조절해준다.

Author And Source

이 문제에 관하여([JavaScript30] 📋 24. Sticky Nav), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@cjh951114/JavaScript30-24.-Sticky-Nav

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다