Неоднократная анимация
Есть вот такой код:
window.onscroll = function() {
if(window.pageYOffset > 0){
$('nav').addClass('nav');
$('.nav').animate({
'opacity':'1'
},1000);
}else{
$('nav').removeClass('nav');
}
};
После первой прокрутки вниз анимация срабатывает, после того как прокручу вверх, а затем снова вниз, уже не срабатывает. В общем работает только первый и единственный раз? Кто знает почему так и как это исправить? |
$('nav').addClass('nav').animate({opacity : 1},1000)...
Это как записать можно. А значение opacity определяется слассом 'nav' и оно менее 1? |
NaStyA128,
window.onscroll = function() {
window.pageYOffset ? $("nav").addClass("nav").animate({
opacity: "1"
}, 1000) : $("nav").css({
opacity: "0"
}).removeClass("nav")
};
|
<style>
nav{
position: fixed;
width: 100%;
background: red;
height: 10px;
opacity: 0.1;
transition: opacity 1s;
}
nav.nav{
opacity: 1;
}
</style>
<body style="height: 500px">
<nav id="nav"></nav>
<script>
window.onscroll = function() {
nav.classList.toggle('nav', window.pageYOffset > 0);
};
</script>
|
| Часовой пояс GMT +3, время: 07:38. |