How to make navbar change on scroll from transparent to coloured

Question

I'm trying to change my navbar from transparent to coloured when I scroll. I used using video tutorial to help, and did as the instructor said, but I did not get the same result. Here is my html, css and javascript (i added it just above the closing tag for body)

$(window).scroll(function(){
  $('nav').toggleClass("scrolled", $(this).scrollTop()>50);
})

body{
  height:2000px
}

.bg-dark{
  background: transparent !important;
}

.bg-dark-scrolled{
  background-color: rgba(15, 14, 14, 0.838) !important;
}

May I get an explanation on why it's not working, and what to do to fix it?

userYBSN · Answer

Because you didn't add the scrolled class, and also the bootstrap .bg-dark background-color override the one declared in your CSS, you need to increase the precedence by adding more class .navbar.bg-dark

    $(window).scroll(function(){
        $('nav').toggleClass("scrolled", $(this).scrollTop()>50);
    })

body {
  height: 2000px;
}

.navbar.bg-dark{
  background-color: transparent !important;
  color: white;
}

.bg-dark.scrolled {
  background: #000 !important;
}

.bg-dark-scrolled{
background-color: rgba(15, 14, 14, 0.838) !important;
}




        //content of navbar

How to make navbar change on scroll from transparent to coloured

1 Answers