scrollspy 和更改颜色不起作用 bootstrap 5

Question

I have a problem with scrollspy and a problem with the button that should appear on the navbar if you open with the phone or if you shrink the browser and i have problem with color in navbar

HTML

   <header id="header" class="fixed-top  align-items-center ">
        <nav class="navbar navbar-expand-lg bg-grey" id="navbar-example2">
            <div class="container-fluid">
                <a class="navbar-brand" href="#"><img class="logoimg" src="images/logo.png" alt="logo"
                        style="width: 30%;"></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 me-auto mb-2 mb-lg-0 ">
                        <li class="nav-item">
                            <a class="nav-link" href="#scrollspyHeading1">Home1</a>
                        </li>

                        <li class="nav-item">
                            <a class="nav-link" href="#scrollspyHeading2">Services</a>
                        </li>

                        <li class="nav-item">
                            <a class="nav-link" href="#scrollspyHeading3">Compétences</a>
                        </li>

                        <li class="nav-item">
                            <a class="nav-link" href="#scrollspyHeading4">Portfolio</a>
                        </li>

                        <li class="nav-item">
                            <a class="nav-link" href="#scrollspyHeading5">Tarifs</a>
                        </li>

                        <li class="nav-item">
                            <a class="nav-link" href="#scrollspyHeading6">À Propos</a>
                        </li>

                        <li class="nav-item">
                            <a class="nav-link" href="#scrollspyHeading7">Contact</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
        <div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-offset="0" class="scrollspy-example"
            tabindex="0">
    </header>

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);
}

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

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

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

.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;
}

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

.navbar .navbar-nav .nav-link:hover {
  color: #03e9f4;
}

.dropdown-item.active,
.dropdown-item:active {
  color: #03e9f4;
}

.dropdown-item:focus,
.dropdown-item:hover {
  background: #03e9f4;
}

.navtext:hover {
  color: #03e9f4;
}







.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 .user-box label {
  position: absolute;
  top: 0;
  left: 0;
  padding: 10px 0;
  font-size: 16px;
  color: #fff;
  pointer-events: none;
  transition: .5s;
}

.login-box .user-box input:focus~label,
.login-box .user-box input:valid~label {
  top: -20px;
  left: 0;
  color: #03e9f4;
  font-size: 12px;
}

.login-box .user-box textarea:focus~label,
.login-box .user-box textarea:valid~label {
  top: -20px;
  left: 0;
  color: #03e9f4;
  font-size: 12px;
}

.login-box form a {
  position: relative;
  display: inline-block;
  padding: 10px 20px;
  color: #03e9f4;
  font-size: 16px;
  text-decoration: none;
  text-transform: uppercase;
  overflow: hidden;
  transition: .5s;
  margin-top: 40px;
  letter-spacing: 4px
}

.login-box a:hover {
  background: #03e9f4;
  color: #fff;
  border-radius: 5px;
  box-shadow: 0 0 5px #03e9f4,
    0 0 25px #03e9f4,
    0 0 50px #03e9f4,
    0 0 100px #03e9f4;
}

.login-box a span {
  position: absolute;
  display: block;
}

.login-box a span:nth-child(1) {
  top: 0;
  left: -100%;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #03e9f4);
  animation: btn-anim1 1s linear infinite;
}

@keyframes btn-anim1 {
  0% {
    left: -100%;
  }

  50%,
  100% {
    left: 100%;
  }
}

.login-box a span:nth-child(2) {
  top: -100%;
  right: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg, transparent, #03e9f4);
  animation: btn-anim2 1s linear infinite;
  animation-delay: .25s
}

@keyframes btn-anim2 {
  0% {
    top: -100%;
  }

  50%,
  100% {
    top: 100%;
  }
}

.login-box a span:nth-child(3) {
  bottom: 0;
  right: -100%;
  width: 100%;
  height: 2px;
  background: linear-gradient(270deg, transparent, #03e9f4);
  animation: btn-anim3 1s linear infinite;
  animation-delay: .5s
}

@keyframes btn-anim3 {
  0% {
    right: -100%;
  }

  50%,
  100% {
    right: 100%;
  }
}

.login-box a span:nth-child(4) {
  bottom: -100%;
  left: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(360deg, transparent, #03e9f4);
  animation: btn-anim4 1s linear infinite;
  animation-delay: .75s
}

@keyframes btn-anim4 {
  0% {
    bottom: -100%;
  }

  50%,
  100% {
    bottom: 100%;
  }
}











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

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

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

.login-box1 .user-box input {
  width: 100%;
  padding: 10px 0;

  color: #fff;
  margin-bottom: 30px;
  border: none;
  border-bottom: 1px solid #fff;
  outline: none;
  background: transparent;
}

.login-box1 .user-box label {
  position: absolute;
  top: 0;
  left: 0;
  padding: 10px 0;

  color: #fff;
  pointer-events: none;
  transition: .5s;
}

.login-box1 .user-box input:focus~label,
.login-box1 .user-box input:valid~label {
  top: -20px;
  left: 0;
  color: #03e9f4;

}

.login-box1 .user-box textarea:focus~label,
.login-box1 .user-box textarea:valid~label {
  top: -20px;
  left: 0;
  color: #03e9f4;
  font-size: 12px;
}

.login-box1 a {
  position: relative;
  display: inline-block;
  padding: 10px 20px;
  color: #03e9f4;
  text-decoration: none;
  text-transform: uppercase;
  overflow: hidden;
  transition: .5s;
  margin-top: 40px;
  letter-spacing: 4px
}

.login-box1 a:hover {
  background: #03e9f4;
  color: #fff;
  border-radius: 5px;
  box-shadow: 0 0 5px #03e9f4,
    0 0 25px #03e9f4,
    0 0 50px #03e9f4,
    0 0 100px #03e9f4;
}

.login-box1 a span {
  position: absolute;
  display: block;
}

.login-box1 a span:nth-child(1) {
  top: 0;
  left: -100%;
  width: 100%;
  height: 5px;
  background: linear-gradient(90deg, transparent, #03e9f4);
  animation: btn-anim1 1s linear infinite;
}

@keyframes btn-anim1 {
  0% {
    left: -100%;
  }

  50%,
  100% {
    left: 100%;
  }
}

.login-box1 a span:nth-child(2) {
  top: -100%;
  right: 0;
  width: 5px;
  height: 100%;
  background: linear-gradient(180deg, transparent, #03e9f4);
  animation: btn-anim2 1s linear infinite;
  animation-delay: .25s
}

@keyframes btn-anim2 {
  0% {
    top: -100%;
  }

  50%,
  100% {
    top: 100%;
  }
}

.login-box1 a span:nth-child(3) {
  bottom: 0;
  right: -100%;
  width: 100%;
  height: 5px;
  background: linear-gradient(270deg, transparent, #03e9f4);
  animation: btn-anim3 1s linear infinite;
  animation-delay: .5s
}

@keyframes btn-anim3 {
  0% {
    right: -100%;
  }

  50%,
  100% {
    right: 100%;
  }
}

.login-box1 a span:nth-child(4) {
  bottom: -100%;
  left: 0;
  width: 5px;
  height: 100%;
  background: linear-gradient(360deg, transparent, #03e9f4);
  animation: btn-anim4 1s linear infinite;
  animation-delay: .75s
}

@keyframes btn-anim4 {
  0% {
    bottom: -100%;
  }

  50%,
  100% {
    bottom: 100%;
  }
}

.carousel-item {
  width: 1600px;
  height: 790px;
}


.carousel-inner .carousel-item > img {
  -webkit-animation: thing 20s;
  -o-animation: thing 20s;
  animation: thing 20s; 
}
@keyframes thing {
  from {
     transform: scale(1, 1);
  }
  to {
    transform: scale(1.5, 1.5);
  }
}


.animate-text { 
 visibility:hidden;  
}

.carousel-caption{
height: 50%;
}

/* effet machine à écrire + animation CSS (SPECIAL) */
/*
.animate-text span { 
 display:inline-block;
  color:purple; 
  animation:fade-in 0.8s ease-in-out 1;
 animation-fill-mode: forwards;
}
@keyframes fade-in {
 0% { opacity:0; font-size:0; xxmargin-left:100px; }
  100% { opacity:1; xxfont-size:300%; xxtransform:rotate(360deg); margin-left:0; }
}
*/

.bg-grey{
  position:fixed;
  top:0;
  width:100%;
  height:50px;
  
}
.bg-grey ul{
  list-style-type:none;
  padding:0;
}

.bg-grey ul li{
  display:inline-block;
  width:100px;
  color:red;
}

.blue{
  position:fixed;
  top:0;
  background:blue;
  width:100%;
  height:50px;
}

 

JS

```

 $(".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(/ /,' ');
        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(){
        var scroll = $(window).scrollTop();
        if (scroll > 300) {
          $(".bg-grey").css("background" , "blue");
        }
  
        else{
            $(".bg-grey").css("background" , "green");   
        }
    })
  })

 ```

the problem i have with the scrollspy is that when i go down it doesn't change the color depending on where i am. I still have another problem it's with the responsiveness, I use bootstrap 5 I would like that when we open with the phone or when we shrink the screen that the navbar appears the menu button but it doesn't does not appear, I do not understand why. And I also have a problem in localhost the navbar changes colors but when it is put online it does not work I would like to know why. In this link you can see result http://portfoliotest1.liveblog365.com

Answer 1

It seems that the .navbar-toggler button has a transparent background-color and that's why it doesn't appear. The color change of the splitter can be done using javascript and with the pixels returned by the scrollTop function.

Here's my fiddle

var scroll = $(window).scrollTop();

if (scroll === 0) {
  $(".bg-grey").css("background", "transparent");
} else if (scroll > 0 && scroll < 300) {
  $(".bg-grey").css("background", "blue");
} else if (scroll > 300 && scroll < 600) {
  $(".bg-grey").css("background", "green");
} else if (scroll > 600 && scroll < 900) {
  $(".bg-grey").css("background", "gray");
} else if (scroll > 900 && scroll < 1000) {
  $(".bg-grey").css("background", "purple");
}