scroll function jquery

Question

I have a fixed header. i want to change the opacity when i scroll down and restore the opacity when i scroll up (at top of the page) i write down this simple script:

$(window).scroll(function () {  

   if(scrollY == 0){

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

   }

   if(scrollY > 0){

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

   }

 });

actually the header take the opacity when i scroll down but when i scroll up at the top of the page he NEVER going back to opacity:1. why?

Answer 1

Take into consideration, that this code is executed over and over again if you scroll a while.

I can imagine, that whatever "scrollY" represents, your browser is pretty busy in calculating/animating.

Answer 2

This might be a better way to go. It checks to see if #header is animated before animating the opacity to .5.

Also, it caches the #header in a variable outside of the scroll handler. Better for performance.

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);
    }
 });