gpt4 book ai didi

javascript - 向上滚动时动画标题消失

转载 作者:行者123 更新时间:2023-12-01 05:43:48 25 4
gpt4 key购买 nike

我创建了一个动画标题 div 菜单,可以在页面加载时向下滑动。我使用animation-delay将动画延迟1秒。当用户向下滚动时,标题 div 的颜色会很好地变化,但是当用户向上滚动时,标题会瞬间消失。请帮忙。

$(window).scroll(function() {
if ($(this).scrollTop() > 250){
$('header').addClass("sticky");
$('a').css({
color: '#fff'
});
}
else{
$('header').removeClass("sticky");
$('a').css({
color: '#151515'
});

}
});
body{
margin:0px;
}
#content{
height:500px;
width:500px;
display:block;
background-color:pink;
margin: 0 auto;
margin-top:50px;
}
header{
position: fixed;
top: -300px;
width: 100%;
height:50px;
padding-top:25px;
text-align: center;
background: red;
z-index: 1;
font-size: .8em;

-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
transition: all 0.4s ease;


animation:theheader 1s;
-moz-animation:top theheader 1s; /* Firefox */
-webkit-animation:theheader 1s; /* Safari and Chrome */

-webkit-animation-delay: 1s; /* Chrome, Safari, Opera */
animation-delay: 1s;

animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;




}
header.sticky {
height:50px;
padding-top:25px;
background-color: blue;
color: #FFF;

}
@-moz-keyframes theheader
{
from {
top: -300px;
}
to {
top:0px;
}
}
<header>
MENU
</header>
<div id="content">
</div>
<div id="content">
</div>
<div id="content">
</div>

https://jsfiddle.net/qectrqg3/35/

最佳答案

如果您只是简单地对顶部值进行动画处理,我建议使用过渡而不是动画。过渡将确保您在过渡过程中更改“动画”值时不会出现闪烁。

关于javascript - 向上滚动时动画标题消失,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28867805/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com