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