2
Я создал анимированное меню заголовка заголовка, которое скользит вниз при загрузке страницы. Я использовал задержку анимации для задержки анимации в течение 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/