This question already has answers here:
Transition of background-color
(3个答案)
在11个月前关闭。
我想在滚动过程中激活
当滚动条到达滚动条时,我设法更改了导航条的
这是我尝试的:
(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;
然后,每当您更改背景颜色时,它将进行动画处理。