anwi_website/dist/Js/navbar.js

$(document).ready(function() {
    let navbarHtml = `<div class="biz-nav-wrapper">
    <nav class="navbar navbar-expand-lg bg-body-tertiary">
    <div class="container">
    <a class="navbar-brand" href="./index.html"><img src="./dist/assets/imgs/anwi-logo-1.png" class="img-fluid" alt="Anwi-Logo"></a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
          <li class="nav-item">
            <a class="nav-link active" href="./laptopmulti.html">Laptops</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="./allinone.html">All in One</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Servers</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">CPU's</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Accessories</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Support</a>
          </li>
          <li class="nav-item">
            <a class="btn btn-dark button_dark" href="#">Get in touch</a>
          </li>
      </div>
    </div>
  </nav>
  </div>`;

    $("#navbar-head").html(navbarHtml);
    $('.pricing').find('.biz-nav-wrapper .navbar').addClass('bg-white');

    //  active-menu
    if (location.pathname != "/") {
        // Main Nav
        $(".navbar-nav li a").each(function() {
            if (this.href === location.href) {
                $(this).addClass("active");
                if ($(this).parents().hasClass("nav-item")) {
                    $(this).parents(".nav-item").find(".nav-link").addClass("active");
                }
                return false;
            }
        });
    }

    // Add Dropdown chevron icon
    let width = $(window).width();

    if (width <= 991.98) {
        $(".dropdown .nav-link").attr("data-toggle", "dropdown");
    } else {
        $(".dropdown .nav-link").attr("data-toggle", "");
    }

    // Toggle Icon Change
    $(".biz-nav-wrapper .navbar-toggler").click(function() {
        $(this).find(".navbar-toggler-icon,.navbar-close-icon").toggle("slow");
        $(".index-new").find(".navbar").toggleClass("bg-white");
    });

    //on-scroll-nav
    var c,
        currentScrollTop = 0,
        navbar = $("#navbar-head");

    // $(window).scroll(function() {
    //     var a = $(window).scrollTop();
    //     var b = navbar.height();
    //     currentScrollTop = a;

    //     // if (c < currentScrollTop && a > b + b) {
    //     //     if ($("#navbarNavDropdown").hasClass("show") == false) {
    //     //         navbar.addClass("scrollUp");
    //     //         $(".workflow-pills").removeClass("top-space");
    //     //     }
    //     // } else if (c > currentScrollTop && !(a <= b)) {
    //     //     navbar.removeClass("scrollUp");
    //     //     $(".workflow-pills").addClass("top-space");
    //     // }

    //     c = currentScrollTop;
    // });

    var scroll_start = 0;
    var startchange = $(".main-body");
    var offset = startchange.offset();
    if (startchange.length) {
        $(document).scroll(function() {
            scroll_start = $(this).scrollTop();
            if (scroll_start > offset.top) {
                $("#navbar-head")
                    .find(".navbar")
                    .css("background-color", "#fff")
                    .css("box-shadow", "0px 12px 20px -25px");
            } else {
                $("#navbar-head")
                    .find(".navbar")
                    .css("background-color", "transparent")
                    .css("box-shadow", "none");
            }
        });
    } else {
        $("#navbar-head")
            .find(".navbar")
            .css("background-color", "#fff")
            .css("box-shadow", "0px 12px 20px -25px");
    }
});