Fade in or fade out based on scroll

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?

Im confused. Do you want the navigation to show up once you start scrolling or once it hits 397px? — Kierchon, Nov 14 '13 at 17:35
Please provide [jsfiddle](http://jsfiddle.net) of what you currently have — Dom, Nov 14 '13 at 17:36
Essentially the element "#aboutNav.fixed" has to be shown at that exact pixel height from the top. The fadeOut is needed as I want a distraction free viewport for the user. As the user scrolls the "#aboutNav.fixed" has to be faded in (so he/she can see the available options). The delay is needed because initial flicker would be cumbersome and hard on the eye. Also with the jQuery functionality you the element being faded will be easy on the eye especially with the delay and fade functionality. I hope this helps. — Neil, Nov 15 '13 at 00:43

Kierchon · Accepted Answer · 2014-01-23T18:33:50.860

2

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

edited Jan 23 '14 at 18:33

answered Nov 14 '13 at 17:41

Kierchon

2,271
1
19
24

I will update the source, in the morning. Thanks for the example. Will post back promptly. – Neil Nov 15 '13 at 00:44
Works perfect. Is there a way an if statement can be added in which the a fadeIn and be triggered if the mouse is between top:61px and top:160px. Which would adhere to the timeout functionality above. (basically as the user enters a range (61px - 160px) from the top viewport (visible screen below the 397px scrollTop value), the fadeIn would be triggers and the timeout would be invoked. – Neil Nov 15 '13 at 09:54
@Neil I think it is possible but youre gonna need to have a new function different from the scroll one. This may give you some problems with the timeout too so be careful. Take a look [here](http://stackoverflow.com/questions/3011418/onmousemove-get-mouse-position) and see if you can figure it out. If you get stuck post a new question and someone will help you out with whatever issue youre having – Kierchon Nov 15 '13 at 14:26
example works great. I have recently been using this code, but wondered how add $(this).show(); based on a mouse hover. Then to trigger the timer on mouse off. Any ideas? – Neil Jan 20 '14 at 13:28
@NeilLittle I updated my answer to answer your question. Let me know if this helps or if you have any questions – Kierchon Jan 23 '14 at 18:34
I should have been clearer. My fault :( When I hover over the #aboutNav.fixed the timeout removes the element even if I have the cursor over it. How would code be adapted to stay present on hover and leave on mouseleave, but adhere to to the delay. In a nutshell, show on scroll down & mousehover otherwise fadeout. – Neil Jan 24 '14 at 15:00
1

@NeilLittle I understand your question and I know its definitely possible unfortunately I dont have the time to solve this for you. Try posting a new question and Im sure you can get an answer in less than an hour – Kierchon Jan 24 '14 at 20:21

Dave Willidow · Answer 2 · 2013-11-17T14:12:38.027

Expanding on what Kierchon's answer a bit:

Since there's no real way to tell when the user is done scrolling (i.e. 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

Thanks for the explanation, I would green both if I could! As I said above, will check in the morning. I guess the only way that this could be expanded would be to set variables. Such as the height trigger from top, and the delay and fadein timings across the script. But it looks great. I guess I am lucky enough to come across a great community! — Neil, Nov 15 '13 at 00:48

Fade in or fade out based on scroll

2 Answers2