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

这可能是一个更好的方法。在将不透明度动画设置为 .5 之前，它会检查 #header 是否已动画化。

此外，它将 #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);
    }
 });