如何使导航栏从透明变为实心引导程序 5.1

Posted 2023-03-04

【中文标题】如何使导航栏从透明变为实心引导程序 5.1

【英文标题】：How to make navbar go from transparent to solid bootstrap 5.1

【发布时间】：2022-01-24 02:54:19

【问题描述】：

尝试了一段时间，终于放弃了。向下滚动页面时，尝试使导航栏对彩色背景透明。我正在使用引导程序 5

【参考方案1】：

怎么样：

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

其中100,50,70是rgb颜色，0.5是不透明度（透明度）值

【讨论】：

抱歉，当我向下滚动页面时忘记添加了

然后使用javascript window.onscroll = function() /* here, add this class to your element */

【参考方案2】：

我找到了解决您提到的问题的方法。我希望这会有用。

例如...

$(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');
   

);

或者;

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