使用jQuery与向下滚动的动画交换标题，并向上滚动回滚

Question

我发现了很多信息。在使用jQuery滚动时更改标题，并试图调整一些以使其适合我的需求。向下滚动工作正常，但滚动不起作用。有任何想法吗？这是我到目前为止有：

HTML/CSS：

<header id="pictogram"> 
    <ul id="nav-main"> 
     <li><a href="#"><span>A</span><img src="A.jpg"></a></li> 
     <li><a href="#"><span>B</span><img src="B.jpg"></a></li> 
     <li><a href="#"><span>C</span><img src="C.jpg"></a></li> 
     <li><a href="#"><span>D</span><img src="D.jpg"></a></li> 
    </ul> 
</header> 

<header id="nopictogram" style="opacity:0;display:none;"> 
    <ul id="nav-main"> 
     <li><a href="#">Another</a></li> 
     <li><a href="#">Beautifully</a></li> 
     <li><a href="#">Challenging</a></li> 
     <li><a href="#">Day</a></li> 
    </ul> 
</header> 

的jQuery：

var lastScrollTop = 0; 
$(window).scroll(function() { 
    var st = $(this).scrollTop(); 
     if (st < lastScrollTop){ 

      $('header#nopictogram') 
       .animate({'opacity':'0'},500, 
        function(){$('header#nopictogram') 
        .css({'display':'none'}); 
        }); 
      $('header#pictogram') 
       .css({'display':'block'}) 
       .animate({'opacity':'1'},500); 

     } else { 

      $('header#pictogram') 
       .animate({'opacity':'0'},500, 
        function(){$('header#pictogram') 
        .css({'display':'none'}); 
        }); 
      $('header#nopictogram') 
       .css({'display':'block'}) 
       .animate({'opacity':'1'},500); 

     } //end if 

     lastScrollTop = st; 
}); 

而且这里有一个fiddle。

Answer 1

这是你在找什么？

http://jsfiddle.net/q5Lco8f6/7/

我不知道你想追踪lastScrollTop什么。当scrollTop为0时，您位于页面的顶部。当它不是0时，你不在最上面。

所以，当0时，显示图片。当不是0时，显示nopicto。

此外，你是混杂不透明，并显示没有和导致奇怪的可见性状态。只需使用fadeIn fadeOut，并将nopicto设置为仅在css中显示：none。

JS

$(window).scroll(function() { 
    var st = $(this).scrollTop(); 

    if (st == 0 && $('header#nopictogram').is(':visible')) { 
     $('header#nopictogram').fadeOut(500, function() { 
      $('header#pictogram').fadeIn(500); 
     });   
    } 
    else if ($('header#pictogram').is(':visible')) { 
     $('header#pictogram').fadeOut(500, function() { 
       $('header#nopictogram').fadeIn(500); 
     });   
    } //end if 
});