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

This question already has answers here:

Transition of background-color

(3个答案)


在11个月前关闭。




我想在滚动过程中激活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';
  }
}

最佳答案

您可以简单地声明过渡样式:
transition: background-color .5s ease;
然后，每当您更改背景颜色时，它将进行动画处理。