根据滚动淡入或淡出

Question

$(document).scroll(function () {
    var y = $(this).scrollTop();

    if (y > 397) {
        $('#aboutNav.fixed').fadeIn(500);   
    } else {
        $('#aboutNav.fixed').hide();
    }
});

As you can tell, this shows a fixed navigation. The CSS is fine, the positioning is great. However I want the navigation to become visible above 397px which it does fine.

However I want the navigation to fade in when I start scrolling:

.fadeIn(500);

When the user starts stops to look at content or whatever, I want the element to fade out

.delay(3000).fadeOut(350);

I believe this is something that can be done by doing an if statement within the first if statement. However a script to check if the user is scrolling and the working script above seem to collide.

Ideas, anyone?

Answer 1

If I understand you correctly. You want the nav to fade in if its above 397px and only when its scrolling... So this function will do that. If I misunderstood your question please clarify in the comments

$(window).scroll(function() {
    clearTimeout($.data(this, 'scrollTimer'));//Lets the timer know were scrolling

    //Hide/Show nav based on location
    var y = $(this).scrollTop();
    if (y > 397) {
        $('#aboutNav.fixed').fadeIn(500);   
    } else {
        $('#aboutNav.fixed').hide();
    }

    //TimeOut function that is only hit if we havent scrolled for 3 Seconds
    //In here is where you fade out the nav
    $.data(this, 'scrollTimer', setTimeout(function() {    
        $('#aboutNav.fixed').fadeOut();
        console.log("Haven't scrolled in 3s!");
    }, 3000));
});

JAN 23 UPDATE based on your comment

You can add this to you $(document).ready() function

$("#elementID").hover(function(){ 
    //show here (mouse over)
    $("#elementToShow").show();
},function(){
    //Start timeout here, (mouse out)
    setTimeout(function() {
        $("#elementToHide").hide();
    }, 3000);
}

Answer 2

Expanding on what Kierchon's answer a bit:

Since there's no real way to tell when the user is done scrolling (ie no event for 'finished scrolling') you'll have to use a event-delaying method called debouncing.

Debouncing is basically setting a timeout to run some code (a function) in the future, and if the event calling the debounced function get called again, you clear and reset the timeout, doing this repeatedly until the event finally stops being called. This method is to prevent events that fire repeatedly (such as scroll and resize) to only execute things after the final event fires and your delayed (debounced) code finally executes.

Here is a nice article on use of debouncing methods in JS .

As long as I understand what you need (which I think I do) - Here's a JSBin with some working code