css动画更改颜色
我用html、jquery和css动画构建了一个“粘性头”。但有一件小事不能正常工作。
在这种情况下，棒头将是活动的，菜单的背景颜色从白色切换到绿色（带有动画）。
现在我需要一个函数，它将颜色从绿色切换回白色（与动画），如果头不再粘（=类粘将移除）。
我怎么才能意识到这一点呢？
null
var sticky = $("#header").offset().top
$(window).scroll( function() {
if ($(window).scrollTop() > sticky) {
$("#header").addClass("sticky");
} else {
$("#header").removeClass("sticky");
}
});css prettyprint-override">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
共有1个答案
如果您运行问题中的代码段，它就能正常工作。在实际的站点上有什么不同的地方你想要使用这个吗？
编辑：您可以尝试以下操作：
.sticky {
position: fixed;
top: 0;
background-color: #7ebd0b !important;
}
#header {
background: white;
transition: 0.5s linear all;
}
你甚至不需要像这样的关键帧。您需要将转换放在元素上的某个东西上，这些东西一直停留在元素上，这样元素就可以控制转换。
-
我正在用Java处理图形（特别是通过Swing和AWT libs），我想在屏幕上移动一个圆圈（生成线条），当线条到达画布边界时，将或坐标设置回0。我对这部分代码没有问题。 然而，现在我试图在坐标均为0时清除屏幕（使用）并更改颜色。屏幕清除工作正常，但我不能更改颜色。似乎，当坐标均为0时，在（0,0）位置的条纹下会出现指定颜色的椭圆形。然而，我希望条纹的颜色改变，直到坐标重置为（0,0）。 这是我的
-
问题内容： 我尝试更改滚动条的颜色，但是在这里它不起作用。 CSS： 问题答案： 您可以为webkit使用以下属性，这些属性可以连接到 影子DOM ： 这是一个带有红色滚动条的工作小提琴，基于此页面上的代码解释了这些问题。 使用此解决方案和您的解决方案，您可以处理除Firefox之外的所有浏览器，Firefox在这一点上我认为目前仍需要JavaScript解决方案。
-
我的导航栏有一个白色背景，但在登录页上它应该是透明的，当我向下滚动时它应该是白色的，在其他页面上它应该是白色的。 我使用的代码来自：滚动后更改导航栏颜色？ 编辑： 所以我在下面的答案中添加了一个小提琴，但不知何故它不起作用 https://jsfiddle.net/jy6njukm/ 这是我的代码： javascript: 这里是我的navbar css： 我有我的导航栏html只有 我的home
-
我想用功能点击时改变颜色，但是有一个问题，我点击劣势时必须是红色，我点击平均时必须是黄色，我点击优势时必须是绿色……同时，当我点击一个东西时，另一个必须失去焦点-背景颜色...如何用函数实现这一点 http://jsfidle.net/ec44z/15/
-
我正在使用RangeSeekBar为3种情况设置一些值（即绿色=OK，琥珀色=警告，红色=撤离）...我正在使用xml绘图来设置背景 我知道我可以通过编程更改渐变，但如何缩小起始颜色并增加结束颜色？有人能解决这个问题吗？ 谢谢
-
主要内容：@keyframes 规则,animation-name,animation-duration,animation-timing-function,animation-fill-mode,animation-delay,animation-iteration-count,animation-direction,animation-play-state,animation通过《 CSS过渡》一节的学习我们知道，利用 transition 属性可以实现简单的过渡动画，但过渡动画仅能指定开始