사이드 바 메뉴를 페이드 인하다가 페이드 백합니다.

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'); 
});