corection-nav

<!DOCTYPE html>
<html lang="en">
    <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>Nav bar pinning question using GSAP</title>

        <!-- GSAP -->
        <script
            defer
            src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"
            integrity="sha512-cOH8ndwGgPo+K7pTvMrqYbmI8u8k6Sho3js0gOqVWTmQMlLIi6TbqGWRTpf1ga8ci9H3iPsvDLr4X7xwhC/+DQ=="
            crossorigin="anonymous"
            referrerpolicy="no-referrer"></script>
        <script
            defer
            src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/ScrollTrigger.min.js"
            integrity="sha512-AMl4wfwAmDM1lsQvVBBRHYENn1FR8cfOTpt8QVbb/P55mYOdahHD4LmHM1W55pNe3j/3od8ELzPf/8eNkkjISQ=="
            crossorigin="anonymous"
            referrerpolicy="no-referrer"></script>

        <link rel="stylesheet" href="style.css" />
        <script defer src="app.js"></script>
    </head>
    <body>
        <div class="wrapper">
            <header>
                <div class="pin-container"> <!-- added this element -->
                    <nav class="nav">
                        <div class="nav__left">
                            <a class="logo" href="">Logo</a>
                        </div>

                        <div class="nav__right">
                            <ul class="nav__list">
                                <li class="nav__item">
                                    <a href="#" class="nav__link">About</a>
                                </li>
                                <li class="nav__item">
                                    <a href="#" class="nav__link">Docs</a>
                                </li>
                                <li class="nav__item">
                                    <a href="#" class="nav__link">Contact</a>
                                </li>
                            </ul>
                        </div>
                    </nav>
                </div> <!-- end of pin-container -->
            </header>

            <main>
                <section class="section-1">
                    <h1>
                        I have a problem in pinning the navbar using GSAP.
                        I want the nav bar to be pinned when it reaches the top of the screen.
                    </h1>
                    <div>
                        <h3>Question</h3>
                        <ol>
                            <li>How to pin the navbar using gsap? 😭</li>
                        </ol>
                    </div>
                    <div>
                        <button>CLICK ME</button>
                        <button id="pin">Pin the nav bar</button>
                    </div>
                </section>
                <section class="section-2">


<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate et error impedit porro praesentium placeat d