I have the code attached here, and I successfully changed the color of the navbar and logo when scrolling down. However, I am looking to add a transition effect when this change occurs.
I experimented with various transition options in CSS, but unfortunately, none of them worked.
<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
}
If you have any suggestions or guidance, I would greatly appreciate it. Thank you.