Home > Enterprise >  scrollspy and change color don't work bootstrap 5
scrollspy and change color don't work bootstrap 5

Time：07-21

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" >
        <nav  id="navbar-example2">
            <div >
                <a  href="#"><img  src="images/logo.png" alt="logo"
                        style="width: 30%;"></a>
                <button  type="button" data-bs-toggle="collapse"
                    data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
                    aria-expanded="false" aria-label="Toggle navigation">
                    <span ></span>
                </button>
                <div  id="navbarSupportedContent">
                    <ul >
                        <li >
                            <a  href="#scrollspyHeading1">Home1</a>
                        </li>

                        <li >
                            <a  href="#scrollspyHeading2">Services</a>
                        </li>

                        <li >
                            <a  href="#scrollspyHeading3">Compétences</a>
                        </li>

                        <li >
                            <a  href="#scrollspyHeading4">Portfolio</a>
                        </li>

                        <li >
                            <a  href="#scrollspyHeading5">Tarifs</a>
                        </li>

                        <li >
                            <a  href="#scrollspyHeading6">À Propos</a>
                        </li>

                        <li >
                            <a  href="#scrollspyHeading7">Contact</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
        <div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-offset="0" 
            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(/ /,'&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(){
        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

CodePudding user response：

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

Page link：https//www.codepudding.com/Enterprise/483372.html

Prev:I want to import and use Google Web Fonts in the style component
Next:Material UI toggle button design
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding