製作中則工具欄菜單淡入淡出回來了

Question

我與被依靠jQuery Waypoints露出側邊導航一旦用戶向下滾動一點一頁紙的現場工作。

我現在有出現正確的菜單，但我需要的菜單再次隱藏一旦用戶回滾動到頂部，因爲會有位於頁面頂部的主導航。

HTML：

<div id="side-nav" style="opacity: 0; "> 
    <ul class="cf"> 
     <li><a href="#top">Home</a></li> 
     <li><a href="#about">About</a></li> 
     <li><a href="#events">Events</a></li> 
     <li><a class="last" href="#stay">Stay</a></li> 
    </ul> 
</div> 

JS：

$(function() { 
    $('#side-nav').css('opacity', 0); 
    $('#side-nav').waypoint(function() { 
     $('#side-nav').animate({ 
      opacity: 1 
     }, 'slow'); 
    }, { 

    }); 
}); 

小提琴：http://jsfiddle.net/GK6Mf/

任何幫助將不勝感激。

Answer 1

使用這種其他帖子，你可以學習如何確定滾動條是在什麼位置，從那裏你可以隱藏/顯示你身邊導航當它在你希望它是該地區。

How do I determine height and scrolling position of window in jQuery?

Answer 2

可以使用direction參數傳遞給航點的回調，以及褪色的權利不透明度取決於參數的值是否爲「向下」或「向上」：

$('#side-nav').css('opacity', 0); 
$('#side-nav').waypoint(function (direction) { 
    $('#side-nav').animate({ 
     opacity: direction === 'down' ? 1 : 0 
    }, 'slow'); 
});