Question

我已经附加了代码，当我向下滚动时，我设法更改了导航栏的颜色和徽标。但是，当此更改发生时，我希望有一个过渡。

我尝试了CSS中的许多过渡选项，但是没有运气。

 <nav class="navbar  fixed-top">
      <div class="container">
        <a class="navbar-brand" href="#">
          <img src="/assets/Intech Logo.png" height="54px" alt="" loading="lazy" />
        </a>
      </div>
    </nav>

jQuery

$(function () { 
    $(window).scroll(function () {
        if ($(this).scrollTop() > 1) { 
            $('.navbar .navbar-brand img').attr('src','/assets/PNG White Print.png');
            $('.navbar').addClass('scrolled')


        }
        if ($(this).scrollTop() < 1) { 
            $('.navbar .navbar-brand img').attr('src','/assets/Intech Logo.png');
            $('.navbar').removeClass('scrolled')
        }
    })
});

.navbar{
  background-image: linear-gradient(to right, #1c003b , #5216aa);
  transition: all 0.5s ease;
}

.scrolled{

  background-image: linear-gradient(to right, #15002d , #3e1181);
  transition-timing-function: ease-out;
  transition: 0.25s;
  transition: all 0.5s ease;// not working

}

欢迎任何帮助。谢谢。

Answer 1

// Sample with jQuery

$(window).scroll(function(){
   var scroll = $(window).scrollTop();
   if(scroll < 400){
       $('.fixed-top').css('background', 'rgba(71,71,71,1)');
   } else{
      $('.fixed-top').css('background', '#fcfcfc');
   }
});

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
 
 <nav class="navbar fixed-top">
      <div class="container">
        <a class="navbar-brand" href="#">
          <img src="https://getbootstrap.com/docs/4.5/assets/img/bootstrap-icons.png" height="54px" alt="" loading="lazy" />
        </a>
      </div>
    </nav>
    
    <!-- HTML CODES HERE -->
   <h1 style="margin-top: 90px;"> Write your html codes here and It would work.</h1>
    
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js">
 </script>

jQuery动画改变Boostrap导航栏

1 个答案: