1

My navbar color will be change when I scroll down. The color is changing. But there is no transition effects. How to give a transition for this. Here is my Code..

$(window).scroll(function() {
if($(this).scrollTop() > 0)
{
    $('.navbar-trans').addClass('afterscroll');
} else
{
    $('.navbar-trans').removeClass('afterscroll');
}

});

This is my script code. and my css is,

.navbar.navbar-trans.afterscroll { background-color:#1ba4df; }

How to give an animation to this.

Melbin Mathai
  • 487
  • 8
  • 26

2 Answers2

1

Just add this rule in your css file. It will work for you, because here the transition property is set to all changes...

.navbar-trans {transition: all 0.3s ease; /* other css rules here */}

Read more about transition property here...

Rohit Sharma
  • 3,304
  • 2
  • 19
  • 34
1

Thats it... Try this dude....

.navbar.navbar-trans.afterscroll { 
background-color:#1ba4df; 
Transition:0.3s all linear;
}
Abijith Ajayan
  • 238
  • 3
  • 17