change color text navbar when scroll-CodePudding

how can I do so that when I scroll down the text of the navbar changes color like the background. https://jsfiddle.net/sx6kd3bn/ there have all code.

$(document).ready(function(){
  $(window).scroll(function(){
      var scroll = $(window).scrollTop();
      if (scroll > 300) {
        $(".navbar-custom").css("background" , "white");
$(".navbar-custom").css("color" , "blue");
      }
      else{
        $(".navbar-custom").css("background" , "rgba(255, 255, 255, 0.37)");
$(".navbar-custom").css("color" , "white");
      }
  })
})

I tried to add that but it doesn't work, only the color of the navbar changes color. And it broke the hover in the navbar when I scroll. How can I make the color of the text change when I scroll at the same time as the navbar and when the navbar goes down there is a shadow at the bottom of the bar that appears

CodePudding user response：

It's better to have the scroll event toggle a class on the header. Something like .scrolled to be added to the header when you're further down then 300. Then in CSS just override the styles for the nav.

But based on the JSFiddle link that you added, the text you're trying to change is actually the ALT text on the broken image. So in order to change that text color you either need to directly change the image's color with JS like this.

$(".navbar-custom img").css("color" , "white");

Here is is in the same script you wrote.

  $(document).ready(function(){
      $(window).scroll(function(){
          var scroll = $(window).scrollTop();
          if (scroll > 300) {
            $(".navbar-custom").css("background" , "white");
            $(".navbar-custom img").css("color" , "black");
    
          }
          else{
            $(".navbar-custom").css("background" , "rgba(255, 255, 255, 0.37)");
            $(".navbar-custom img").css("color" , "white");
          }
      })
    })

CodePudding user response：

Try this!

You can achieve by CSS

In jsfiddle Line No: 36

.navbar-nav .nav-item .nav-link {
  color: white; to //#222; whatever you want 
}

In jsfiddle Line No: 32 Add background property background:#222; //whatever you want

.navbar-nav .nav-item .nav-link.active {
  color: cyan;
  background:#222;
  box-shadow: inset 0 -2.5px 0 0 cyan;
}