Change background color of navbar when it scroll

Question

I want to change the background-color of my navbar when position: sticky activates during scrolling.

I have managed to change the background-color of the navbar when the scroll arrives on it, but I would like to animate it to make this change more gradual.

This is what I tried:

window.onscroll = function() {myFunction()};

var navbar = document.getElementById("menu_navbar");

var rect = navbar.getBoundingClientRect();

function myFunction() {
  if (window.pageYOffset >= rect.top) {
     $( "#menu_navbar" ).animate({
        "background-color": "rgba(255, 229, 57, 0.8)"
     }, 1000);
  } 
  else {
     navbar.style.backgroundColor = 'transparent';
  }
}

Answer 1

You could simply declare a transition style:

transition: background-color .5s ease;

Then, whenever you change the background colour, it will animate.