오늘 노마드코더에서 본건데 꿀팁이네요

position: sticky;

아래 코드 실행해서 스크롤 해보세요

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        html, body {

            margin: 0;

            padding: 0;

        }

        header {

            background: #0f0;

            line-height: 100px;

            text-align: center;

        }

        nav {

            background: #0af;

            top: 0;

            position: sticky;

            line-height: 30px;

            text-align: center;

        }

        .main {

            background: #1a1;

            height: 2000px;

            text-align: center;

        }

        footer {

            background: #834;

            text-align: center;

        }

    </style>

</head>

<body>

    <header>

        header

    </header>

    <nav>

        nav

    </nav>

    <div class="main">

        aaaa

    </div>

    <footer>

        Footer

    </footer>

</body>

</html>