我用html、jquery和css动画构建了一个“粘性头”。但有一件小事不能正常工作。
在这种情况下，棒头将是活动的，菜单的背景颜色从白色切换到绿色（带有动画）。
现在我需要一个函数，它将颜色从绿色切换回白色（与动画），如果头不再粘（=类粘将移除）。
我怎么才能意识到这一点呢？
null
var sticky = $("#header").offset().top
$(window).scroll( function() {
if ($(window).scrollTop() > sticky) {
$("#header").addClass("sticky");
} else {
$("#header").removeClass("sticky");
}
});body {
height: 5000px;
background-color: #000;
margin-top: 100px;
}
#header {
background-color: #fff;
height: 50px;
width: 500px;
}
.sticky {
position: fixed;
top: 0;
background-color: #7ebd0b !important;
animation: switchColorToGreen .5s;
}
.sticky + .pageContainer {
padding-top: 130px;
}
@keyframes switchColorToGreen {
from {background-color: #fff;}
to {background-color: #7ebd0b;}
}<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<header id="header">
Menu 1
</header>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</body>
</html>null
如果您运行问题中的代码段，它就能正常工作。在实际的站点上有什么不同的地方你想要使用这个吗？
编辑：您可以尝试以下操作：
.sticky {
position: fixed;
top: 0;
background-color: #7ebd0b !important;
}
#header {
background: white;
transition: 0.5s linear all;
}
你甚至不需要像这样的关键帧。您需要将转换放在元素上的某个东西上，这些东西一直停留在元素上，这样元素就可以控制转换。
