無제

Vanilla Javascript_스마트 스크롤 내비게이션 본문

<script>

Vanilla Javascript_스마트 스크롤 내비게이션

yo-u-loo 2026. 6. 15. 16:14

 

Vanilla-JS-​nav-top

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=3.0">
    <title>스마트 스크롤 내비게이션 예제-https://youtu.be/LB70WzwBCTo?list=PLpK-F7ihqVc39kaC4-77snhSpxa5umFRg</title>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css">
    <link rel="stylesheet" href="js6.css">
    <script src="script.js"></script>
</head>

<body>
    <nav>
        <div id="navBar">
            <a href="#">December</a>
            <a href="#">November</a>
            <a href="#">September</a>
        </div>
    </nav>

    <section>

        <script>
            let prevScrollpos = window.pageYOffset; // 현재 스크롤 위치 저장

            window.onscroll = function () { // 스크롤 이벤트 등록
                let currentScrollpos = window.pageYOffset; // 현재 위치 구하기
                if (prevScrollpos > currentScrollpos) { // 스크롤 방향 판단
                    document.getElementById("navBar").style.top = "0";
                } else { // 위로 스크롤하면 네비게이션 표시
                    document.getElementById("navBar").style.top = "-100px"; // 아래로 스크롤하면 네비게이션 숨김
                }
                prevScrollpos = currentScrollpos; // 이전 위치 갱신
            }
        </script>

        <h1>Scroll down</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ac mi sit amet orci egestas
            pellentesque.<br> Nunc id neque eu dui pulvinar interdum nec eget dolor.</p>
        <p><br></p>
        <img src="https://images.unsplash.com/photo-1554320666-c12ac6076837?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2134&q=80"
            width="100%" alt="">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br> Curabitur ac mi sit amet orci egestas
            pellentesque.<br> Nunc id neque eu dui pulvinar interdum nec eget dolor.</p>
        <p><br> It has survived not only five centuries, but also the leap into electronic typesetting, remaining
            essentially unchanged. <br>It was popularised in the 1960s with the release of Letraset sheets containing
            Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including
            versions of Lorem Ipsum.</p>
        <p><br></p>

        <footer><small>There is no one who loves pain itself, who seeks after it and wants to have it, simply because it
                is pain...</small></footer>
    </section>

</body>

</html>

 

@import url('https://fonts.googleapis.com/css?family=EB+Garamond&display=swap');

* {
    border: 0px solid slategray;
    padding: 0;
    margin: 0;
}

body {
    font-family: 'EB Garamond', serif;
    color: darkgray;
    font-size: 1rem;
    line-height: 1.2rem;
}

h1 {
    font-size: 2rem;
    line-height: 5rem;
    color: black;
}

img {
    margin: 20px 0;
}

#navBar {
    background: lightseagreen;
    position: fixed;
    top: 0;
    width: 100%;
    display: block;
    transition: top 0.8s;
    line-height: 5rem;
    padding: 0 0 0 10%;
}

#navBar a {
    float: left;
    display: block;
    color: #fff;
    text-decoration: none;
    margin: 0 40px 0 0;
}

#navBar a:hover {
    color: mediumblue;
}

section {
    margin: 10%;
}

 

이번 코드는 UX(사용자 경험) 중심의 고급 퍼블리싱 기술 중 하나인 ‘스크롤 방향 감지 내비게이션 바(Smart Hidden Navigation Bar)’ 기능입니다.

사용자가 페이지를 아래로 스크롤하며 콘텐츠를 읽을 때는 메뉴바를 자연스럽게 숨겨 화면을 넓게 활용하고, 반대로 위로 살짝 스크롤하면 메뉴바가 상단에서 부드럽게 다시 나타나는 트렌디한 인터랙션입니다.

이 패턴은 모바일 매거진, 기술 블로그, 커머스 사이트 등 다양한 서비스에서 본문 가독성을 높이기 위해 널리 사용되는 방식입니다.

이 예제의 핵심은 단순한 UI 토글이 아니라, 이전 스크롤 위치와 현재 스크롤 위치를 실시간으로 비교하며 방향을 판단하는 로직에 있습니다. 즉, “사용자가 아래로 내리는 중인지, 위로 올리는 중인지”를 조건식으로 분석해 화면 동작을 제어하는 구조입니다.

이 코드가 매끄럽게 동작하려면 자바스크립트 로직뿐 아니라 CSS의 역할도 매우 중요합니다. 메뉴가 끊기듯 나타나는 것이 아니라, 물 흐르듯 자연스럽게 전환되도록 만드는 것이 완성도의 핵심입니다.

 

 

[스마트 내비게이션을 위한 CSS 정석]

자바스크립트가 top 값을 동적으로 변경하기 전에, CSS에는 안정적인 애니메이션을 위한 기본 구조가 먼저 정확하게 설계되어 있어야 합니다.
그렇지 않으면 화면이 끊기거나 부자연스럽게 움직일 수 있습니다.

#navBar {position: fixed; top: 0; width: 100%; height: 60px; transition: top 0.3s;}
이 설정을 통해 내비게이션 바는 페이지 콘텐츠와 상관없이 브라우저 상단에 고정된 상태로 항상 유지됩니다.

  1. position: fixed;
    내비게이션 바를 화면 상단에 고정하여 스크롤과 무관하게 항상 같은 위치에 있도록 만드는 핵심 속성입니다.

  2. top: 0;
    기본 상태에서 내비게이션이 화면 가장 위에 위치하도록 설정하는 값입니다.

  3. transition: top 0.3s; ★핵심
    이 속성이 있어야 자바스크립트로 top: 0과 top: -100px 값이 변경될 때, 단순한 순간 이동이 아니라 0.3초 동안 위아래로 부드럽게 이동하는 애니메이션 효과가 발생합니다.

 

'<script>' 카테고리의 다른 글

Vanilla Javascript_자동 이미지 슬라이드 쇼  (0) 2026.06.15
Vanilla Javascript_실시간 디데이 카운트다운  (0) 2026.06.15
Vanilla Javascript_사이드바 토글 메뉴  (0) 2026.06.12
Vanilla Javascript_풀 스크린 오버레이 메뉴  (0) 2026.06.12
Vanilla Javascript_이미지 갤러리 전환  (0) 2026.06.12
'<script>' Related Articles more