jquery側導航動畫

Question

我想添加一個側面導航欄到我的網站，當用戶滾動，使正常的導航欄不可見時，從右側動畫。我設法得到它如此動畫如何我想要但不是當我想要。它只是在顯示之間交替出現，並且每當用戶滾動時都不顯示，而不是每當用戶滾動通過標題時顯示。

我使用jQuery和這裏是一個的jsfiddle： http://jsfiddle.net/2twmcmzh/1/和我現在的JS：

$(document).ready(function() { 
    var $header = $('header'); 
    var $sideButtons = $('.roundSideButton'); 
    var scrollstate = 'hidden'; 
    var animating = false; 
    var duration = 500; 
    $(window).scroll(function() { 
     var scrollToTop = $(window).scrollTop(); 
     if(animating === false){ 
      if(scrollToTop > $('header').height() && scrollstate == 'hidden'){ 
       showSideButtons(true); 
      }else if (scrollstate == 'shown'){ 
       showSideButtons(false); 
      } 
     } 
    }); 


    function showSideButtons(hide){ 
     animating = true; 
     if(hide){ 
      $.each($sideButtons,function(i) { 
       $(this).stop().delay(i * (duration/2)).animate({right:"20px"}, duration,function(){animating = false;}); 
      }); 
      setTimeout(function() { 
       animating = false; 
       scrollstate = 'shown'; 
       console.log(" " + scrollstate + " " + animating); 
      }, duration * $sideButtons.length); 
     }else{ 
      $.each($sideButtons,function(i) { 
       $(this).stop().delay(i * (duration/2)).animate({right:"-20px"}, duration); 
      }); 
      setTimeout(function() { 
       animating = false; 
       scrollstate = 'hidden'; 
       console.log(" " + scrollstate + " " + animating); 
      }, duration * $sideButtons.length); 
     } 
    } 
}); 

Answer 1

如果我理解你正確，一切就OK了當用戶向下滾動。只要標題被隱藏，就會顯示這些點。 （從我在小提琴中看到）。當用戶滾動到頂部時，問題就會開始，而不是在顯示標題之前隱藏點。對？

如果是這樣，您只需複製檢查就像您在狀態爲hidden時所做的那樣。

if(animating === false){ 
     if(scrollToTop > $('header').height() && scrollstate == 'hidden'){ 
      showSideButtons(true); 
     // I was added this check `scrollToTop < $('header').height()` 
     } else if (scrollstate == 'shown' && scrollToTop < $('header').height()){ 
      showSideButtons(false); 
     } 
    }