Форум

NaStyA128 · #1 (**permalink**) 10.03.2015, 16:48

Есть вот такой код:

window.onscroll = function() {
    if(window.pageYOffset > 0){
      $('nav').addClass('nav');
      $('.nav').animate({
        'opacity':'1'
      },1000); 
    }else{
      $('nav').removeClass('nav');
    }
  };

После первой прокрутки вниз анимация срабатывает, после того как прокручу вверх, а затем снова вниз, уже не срабатывает. В общем работает только первый и единственный раз? Кто знает почему так и как это исправить?

laimas · #2 (**permalink**) 10.03.2015, 17:22

$('nav').addClass('nav').animate({opacity : 1},1000)...

Это как записать можно. А значение opacity определяется слассом 'nav' и оно менее 1?

рони · #3 (**permalink**) 10.03.2015, 18:15

NaStyA128,

window.onscroll = function() {
    window.pageYOffset ? $("nav").addClass("nav").animate({
        opacity: "1"
    }, 1000) : $("nav").css({
        opacity: "0"
    }).removeClass("nav")
};

danik.js · #4 (**permalink**) 10.03.2015, 19:31

<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>

Форум

Справочник

Discord чат

Курсы javascript