[JavaScript30] πŸ“‹ 24. Sticky Nav

μ‘°μ€€ν˜•Β·2021λ…„ 7μ›” 31일
0

JavaScript30

λͺ©λ‘ 보기
24/30

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됐을 λ•Œ 넓이λ₯Ό μ‘°μ ˆν•΄μ€€λ‹€.

profile
κΉƒν—ˆλΈŒ : github.com/JuneHyung

0개의 λŒ“κΈ€