javascript - 滚动时更改导航栏的背景颜色

Question

我想更改background-color当position: sticky时我的导航栏滚动期间激活。

我已成功更改 background-color当滚动到达导航栏时，它会出现在导航栏上，但我想对其进行动画处理以使此更改更加渐进。

这是我尝试过的:

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

您可以简单地声明一个过渡样式:

过渡:背景颜色 .5s 缓和；

然后，每当您更改背景颜色时，它就会动画。