Создание меню боковой панели исчезает, затем исчезает

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

    }); 
}); 

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