CODEWITHSUNDEEP
javascripthtmlcss
Melbin Mathai
Melbin Mathai

Reputation: 507

Transition in Navbar when Scroll Down

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.

Upvotes: 1

Views: 4294

Answers (2)

Abijith Ajayan
Abijith Ajayan

Reputation: 274

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

.navbar.navbar-trans.afterscroll { 
background-color:#1ba4df; 
Transition:0.3s all linear;
}

Upvotes: 1

Rohit Sharma
Rohit Sharma

Reputation: 3334

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...

Upvotes: 1

Related Questions