scrollspy and change color don't work bootstrap 5

Scrollspy and change color don't work bootstrap 5

by marvin90

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equive="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="fonts/icomoon/style.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" integrity="sha512-c42qTSw/wPZ3/5LBzD+Bw5f7bSF2oxou6wEb+I/lqeaKV5FDIfMvvRp772y4jcJLKuGUOpbJMdg/BTl50fJYAw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
  <script src="https://kit.fontawesome.com/de78321f2a.js" crossorigin="anonymous"></script>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

  <title>Portfolio</title>
</head>
<!-- ======= add data-bs-spy="scroll" ======= -->
<body  data-bs-spy="scroll" >
    <header id="header" class="fixed-top  align-items-center ">
    <!-- ======= add navbar-light ======= -->
        <nav class="navbar navbar-expand-lg  bg-grey navbar-light  px-3" id="navbar-example2">
          <div class="container-fluid">
            <a class="navbar-brand" href="#">
              <img class="logoimg" src=" https://cdn-icons-png.flaticon.com/128/732/732212.png" alt="logo" style="width: 30%;">
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="true" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
            <!-- ======= add nav-pills ======= -->
              <ul class="navbar-nav  nav-pills">
                <li class="nav-item">
                  <a class="nav-link" href="#home">Home</a>
                </li>
                <li class="nav-item">
           ...

CSS

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

* {
  font-family: 'Roboto Condensed';
}
a {
  text-decoration: underline;
}


header {
  width: 100%;
  background-size: cover;

  position: relative;
}

header::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

header nav.navbar {
  z-index: 999;
}

header nav.navbar .navbar-brand {
  font-size: 1.4rem;
}


.logoimg {
  transition: transform .7s ease-in-out;
}

.logoimg:hover {
  transform: rotate(360deg);
}

.navbar-nav > li > a{
  color: white !important;
 }

.nav-item::after {
  content: '';
  display: block;
  width: 0px;
  height: 2px;
  background: #03e9f4;
  transition: 0.2s;
}

.nav-item:hover::after {
  width: 100%;
  color: #03e9f4 !important;
}

.navbar-dark .navbar-nav .active>.nav-link,
.navbar-dark .navbar-nav .nav-link.active,
.navbar-dark .navbar-nav .nav-link.show,
.navbar-dark .navbar-nav .show>.nav-link,
.navbar-dark .navbar-nav .nav-link:focus,
.navbar-dark .navbar-nav .nav-link:hover {
  color: #03e9f4 !important;
}

.nav-link {
  padding: 15px 5px;
  transition: 0.2s;
}









.map-container-6 {
  overflow: hidden;
  padding-bottom: 56.25%;
  position: relative;
  height: 0;
}

.map-container-6 iframe {
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  position: absolute;
}

.login-box {
  padding: 40px;
  background: rgb(0, 0, 0);
  box-sizing: border-box;
  box-shadow: 0 15px 25px rgba(0, 0, 0, .6);
  border-radius: 10px;
}

.login-box h2 {
  margin: 0 0 30px;
  padding: 0;
  color: #fff;
  text-align: center;
}

.login-box .user-box {
  position: relative;
}

.login-box .user-box input {
  width: 100%;
  padding: 10px 0;
  font-size: 16px;
  color: #fff;
  margin-bottom: 30px;
  border: none;
  border-bottom: 1px solid #fff;
  outline: none;
  background: transparent;
}

.login-box...

JavaScript

$(".menu-activator").on("click", function() {
  $("body").toggleClass("menu-active");
});

"use strict";
window.addEventListener("DOMContentLoaded", (event) => {
  animate_text();
});

// -------------------
function animate_text() {
  let delay = 100,
    delay_start = 0,
    contents,
    letters;

  document.querySelectorAll(".animate-text").forEach(function(elem) {
    contents = elem.textContent.trim();
    elem.textContent = "";
    letters = contents.split("");
    elem.style.visibility = 'visible';

    letters.forEach(function(letter, index_1) {
      setTimeout(function() {
        // ---------
        // effet machine à écrire (SIMPLE)
        elem.textContent += letter;
        // ---------
        // OU :
        // effet machine à écrire + animation CSS (SPECIAL)
        /*
        var span = document.createElement('span');
        span.innerHTML = letter.replace(/ /,'&nbsp;');
        elem.appendChild(span);
*/
        // ---------
      }, delay_start + delay * index_1);
    });
    delay_start += delay * letters.length;
  });
}

/* ------------------------- */
/* version jQuery */
/* ------------------------- */
/*
"use strict";
$(document).ready(function() {
  animate_text();
});
// -------------------
function animate_text() 
{
  let delay = 100,
      delay_start = 0,
      contents,
      letters;

  $(".animate-text").each(function(index, obj) {
    contents = $(obj).text().trim();
    $(obj).html(''); // on vide le contenu
    letters = contents.split("");
    $(letters).each(function(index_1, letter) {
      setTimeout(function() {
        // ---------
        // effet machine à écrire simple
        $(obj).html( $(obj).html() + letter ); // on ajoute chaque lettre l une après l autre
        // ---------
        // ---------
      }, delay_start + delay * index_1);
    });
    // le suivant démarre à la fin du précédent
    delay_start += delay * letters.length;
  });
}
*/


$(document).ready(function() {
  $(window).scroll(function() {
 ...