Header sticky on scroll

                
 
 <header class="z-fixed header-transparent header-absolute-top header-sticky">
    <nav class="navbar navbar-expand-lg navbar-light navbar-link-white">
        <div class="container position-relative">
            <a class="navbar-brand" href="index.html">
                <img src="assets/img/logo/logo.svg" alt="" class="img-fluid navbar-brand-sticky">
                <img src="assets/img/logo/logo-white.svg" alt="" class="img-fluid navbar-brand-transparent">
                </a>
            <div class="d-flex align-items-center navbar-no-collapse-items order-lg-last">
                 <button class="navbar-toggler order-last" type="button" data-bs-toggle="collapse"
                    data-bs-target="#mainNavbarTheme" aria-controls="mainNavbarTheme" aria-expanded="false"
                    aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon">
                          <i></i>
                        </span>
                 </button>
                 <div class="nav-item me-3 me-lg-0 dropdown">
                      <a href="#" class="btn btn-sm btn-primary rounded-pill" data-bs-toggle="dropdown">
                        Purchase
                        </a>
                 </div>
            </div>
         <div class="collapse navbar-collapse" id="mainNavbarTheme">
         <!--Navbar items-->
         <ul class="navbar-nav ms-auto">
          <li class="nav-item">
           <a class="nav-link" href="#">Home</a>
          </li>
          <li class="nav-item">
           <a class="nav-link" href="#">About</a>
          </li>
          <li class="nav-item dropdown">
             <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Dropdown Nav</a>
            <div class="dropdown-menu dropdown-menu-end">
              <a href="#" class="dropdown-item">Dropdown item</a>
              <a href="#" class="dropdown-item">Dropdown item</a>
              <a href="#" class="dropdown-item">Dropdown item</a>
              <a href="#" class="dropdown-item">Dropdown item</a>
            </div>
           </li>
           <li class="nav-item">
            <a class="nav-link" href="#">Projects</a>
           </li>
           <li class="nav-item">
            <a class="nav-link" href="#">Contact</a>
           </li>
          </ul>     
         </div>
      </div>
   </nav>
</header>