Making a sidebar menu fade in then fade back out

Question

I am working with a one page site that is relying on jQuery Waypoints to reveal the side navigation once the user scrolls down a bit.

I currently have the menu appearing correctly but I need the menu to hide again once the user scrolls back up to the top, since there will be a main navigation located at the top of the page.

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/

Any help would be greatly appreciated.

Don't just post a link to an external site. Post relevant code and what you are having issues with — , Sep 10 '13 at 19:55

score 0 · Answer 1 · edited May 23 '17 at 10:25

0

Using this other Post you can learn how to determine what position the scroll bar is in. From there you can hide/show your side navigation when it is in the area you want it to be.

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

edited May 23 '17 at 10:25

Community

1
1

answered Sep 10 '13 at 19:55

Rottingham

2,593
1
12
14

I am a newer jQuery user. Would you mind going into more detail of how this would be accomplished? – Chase Sep 10 '13 at 20:10

score 0 · Answer 2 · answered Sep 13 '13 at 21:18

You can use the direction parameter passed to the callback in Waypoints, and fade to the right opacity depending on whether the value of that parameter is "down" or "up":

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

Making a sidebar menu fade in then fade back out

2 Answers2