고정 내비게이션 바를 만드는 방법

데모 및 소스 코드

HTML

<div class="header">
    <h2>Header</h2>
    <p>Please Scroll down to see the sticky effect.</p>
</div>

<div id="navbar">
    <a class="active" href="#">Home</a>
    <a href="#">News</a>
    <a href="#">Blog</a>
    <a href="#">Videos</a>
    <a href="#">Contact</a>
</div>

<div class="content">
    <p>The navbar will stick to the top when you reach its scroll position.</p>
    <p>
        Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum
        definitiones no quo, maluisset concludaturque et eum, altera fabulas ut
        quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert
        laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no
        molestiae voluptatibus.
    </p>

    <!-- more dummy text for have scrolling -->
</div>

CSS

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    margin: 0;
    font-size: 28px;
    font-family: Arial, Helvetica, sans-serif;
}

.header {
    background-color: #f1f1f1;
    padding: 30px;
    text-align: center;
}

#navbar {
    background-color: #333;
    display: flex;
}

#navbar a {
    display: block;
    flex-basis: 20%;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}

#navbar a:hover {
    background-color: #ddd;
    color: black;
}

#navbar a.active {
    background-color: red;
    color: white;
}

.content {
    padding: 16px;
}

.sticky {
    position: fixed;
    top: 0;
    width: 100%;
}

.sticky + .content {
    padding-top: 60px;
}

자바스크립트 코드

const navbar = document.getElementById('navbar')
const navbarPos = navbar.offsetTop

const handleScroll = () => {
    const STICKY = 'sticky'

    if (window.pageYOffset >= navbarPos) {
        navbar.classList.add(STICKY)
        return true
    }

    navbar.classList.remove(STICKY)
}

window.onscroll = function () {
    handleScroll()
}