функция прокрутки JQuery

Question

У меня есть фиксированный заголовок. я хочу изменить непрозрачность при прокрутке вниз и восстановить непрозрачность при прокрутке вверх (вверху страницы) я записываю этот простой скрипт:

$(window).scroll(function () {  

   if(scrollY == 0){

   $("#header").animate({
   opacity: 1
   }, 1000);

   }

   if(scrollY > 0){

   $("#header").animate({
   opacity: 0.5
   }, 1000);   

   }

 });

на самом деле заголовок принимает непрозрачность, когда я прокручиваю вниз, но когда я прокручиваю вверх в верхней части страницы, он НИКОГДА не возвращается к прозрачности: 1. почему?

Answer 1

Это может быть лучший путь. Он проверяет, анимируется ли #header, перед тем как анимировать прозрачность до .5.

Кроме того, он кэширует #header в переменной вне обработчика scroll. Лучше для производительности.

var $header = $('#header');

$(window).scroll(function () {

   if(scrollY <= 0){
       $header.animate({
            opacity: 1
       }, 1000);
   }
   if(scrollY > 0 && $header.is(':not(:animated)')){
       $header.animate({
            opacity: .5
       }, 1000);
    }
 });