Jquery scroll function

Question

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

$(window).scroll(function () {  

   if(scrollY == 0){

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

   }

   if(scrollY > 0){

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

   }

 });

the title actually accepts opacity when I scroll down, but when I look at the top of the page, it NEVER returns to opacity: 1. why?

Answer 1

This may be the best way to go. It checks to see if #headeranimations are animated before animating to .5.

In addition, it caches #headerin a variable outside the handler scroll. 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);
    }
 });