Animating navigation with scroll and click jQuery functions

Question

I'm attempting to animate a navigation. At first the navigation does not show up. You must scroll down the viewport however many pixels for it to fadeIn. Then when you click on a link in the nav, I am attempting to animate the navigation, by making it move from the middle of the page to the top of the page.

Here is a fiddle to illustrate my situation: http://jsfiddle.net/g8urqu8b/

& here is my actual webpage I am working on: http://www.unf.edu/~n00804716/my-site/

On my real site, when a link in the nav is clicked there is also a div that I fadeOut while I fadeIn a new one that was not previously displayed. This is why it is necessary for the window to scrollTop when a nav link is clicked; so the user is able to scroll down the newly presented div from the top of the document.

So essentially, I believe I'm asking if there is there a way to kill this scroll function with a separate click function:

      $(window).scroll(function() {
        if ( $(this).scrollTop() < 500) {
            $("ul.click").fadeOut(400);
        } else {
            $("ul.click").fadeIn(400);
        }
      });

Answer 1

Ok so if I understood this correctly, this is the kind of result you are expecting.

JavaScript:

$("div").hide();
function onScroll() {
    if ($(this).scrollTop() < 150) {
        $("div").fadeOut(400);
    } else {
        $("div").fadeIn(400);
    }
}
$(window).on('scroll', onScroll);
$("div").click(function () {
    $(this).animate({
        "top": "50px"
    }, 500)
    $(window).scrollTop(0);
    $(window).off('scroll', onScroll);
});

The idea is to be able to use .on() (and .off()) method of jQuery to listen (or to not listen) to scroll events.

The second parameter to both .on() and .off() methods is the callback, in our case, it is a function by the name onScroll.

Hope this helps.