Been trying this for a while now and finally given up. Trying to make the navbar transparent to a colored background when scrolling down the page. I'm using bootstrap 5

CodePudding user response：

How about:

.your-navbar {
  background: rgba(100,50,70,0.5);
}

where 100,50,70 is rgb color, and 0.5 is opacity (transparency) value

CodePudding user response：

I found a solution for the problem you mentioned. I hope that will be useful.

For example...

$(window).scroll(function() {

   if ($(this).scrollTop() >= 300) {
      $('.home .x-navbar').css({
         'background-color': '#ffffff'
      });
      $('.home .x-navbar .desktop .x-nav > li > a').css({
         'color': 'red'
      });
      $('.home .x-navbar .x-brand img').attr('src', '//jadoreweddingsalgarve.com/wp-content/uploads/2018/03/wine.png');

   } else {
      $('.home .x-navbar').css({
         'background-color': 'transparent'
      });
      $('.home .x-navbar .desktop .x-nav > li > a').css({
         'color': 'green'
      });
      $('.home .x-navbar .x-brand img').attr('src', '//jadoreweddingsalgarve.com/wp-content/uploads/2018/03/logo2.png');
   }

});

Or;

$(window).scroll(function() {
   if ($(window).scrollTop() >= 50) {
      $('.navbar').css('background', 'red');
   } else {
      $('.navbar').css('background', 'transparent');
   }
});