I need help creating a fadeIn-Out on a sticky element

[Norman]

I have my navbar like so:

Klayz.com is for sale | HugeDomains

And I want it to completely disappear with a fadeOut when the mouse is idle, except for when it is at the top of the page (so no scroll has been made).

This is what I have so far:

Edit fiddle - JSFiddle - Code Playground

(taken from here: http://stackoverflow.com/questions/13277566/fade-in-fade-out-fixed-sticky-header)

I would need to add to it the code that make it stay visible on top, but I really don’t know how to do it.

In the link above (this link) I already added that JSFiddle code, but it doesn’t work at all. Maybe it’s a z-index problem?

Can you please help me guys?

[PaulOB]

Where is the jquery file as you are getting a not defined error?

Uncaught ReferenceError: $ is not defined

That probably means that either you are calling something before jquery is initialised or you haven’t added jquery?

[Norman]

You’re probably right. I have there jQuery, but I call it at the end of the document. The problem is that I tried adding that new script code at the beginning (just to test it out, then I would have moved it down).

Ok, I moved it to the end but it still doesn’t work.

Can you please tell me how did you find out about that error? I tried opening Tools → Dev Tools → Console in Firefox but I can’t find it anywhere. Maybe the Console is not te right place I should look at?

Ok, found! I needed to open the “other” console with Shift + J!

Ok, then I moved the script at the end. In the script code I have var header = $("#fademe"); and in the HTML I have <div id="fademe">[content I want faded]</div> but I still get that error (ReferenceError: $ is not defined). Why?

[PaulOB]

Its something to do with however you are loading those scripts as they are getting loaded after the call to jquery in that snippet.

If I add this line:

<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>

Then there is no error.

However your version doesn’t load in time:

<script data-cfasync="true" data-rocketsrc="http://code.jquery.com/jquery-2.1.4.min.js" type="text/rocketscript"></script>

Either add the new snippet in the same manner that you are doing with that other file or just have the link to jquery as per normal.

I am unfamiliar with how you are loading those files so you may need help form someone more accomplishedf than me

[Norman]

Thank you for your replies, PaulOB. Strange. I’m using CloudFlare, but the jQuery is loaded correctly (if it wasn’t there I would had some problems with eg. the dropdown menus at the top). This is the code that I have right now at the end of my HTML code, before the jQuery library is called:

<script type="text/javascript">
$(window).on('scroll', function() {
    var header = $("#fademe");
    if ($(this).scrollTop() > 50) {
        if (!header.data('faded')) header.data('faded', 1).stop(true).fadeTo(300, 0);
    } else if (header.data('faded')) {
        header.data('faded', 0).stop(true).fadeTo(300, 1);
    }
});
</script>

and the navbar I want to hide/fadeout is enclosed in this code:

<div id="fademe">[nav code]</div>

I sincerely don’t know what else I could try here.

[PaulOB]

@Norman

I sincerely don’t know what else I could try here.

Can’t you just jquery normally and see what happens. I’m assuming you are delaying the loading of the scripts which means that the inline script runs straight away and causes the error.

How about packaging that new inline script in the same way that you have done for the others?

[Norman]

Now I have this jQuery code:

<script data-cfasync="true" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>

so I tried adding the new script this way:

<script data-cfasync="true" defer="defer" type="text/javascript">
$(window).on('scroll', function() {
    var header = $("#fademe");
    if ($(this).scrollTop() > 50) {
        if (!header.data('faded')) header.data('faded', 1).stop(true).fadeTo(300, 0);
    } else if (header.data('faded')) {
        header.data('faded', 0).stop(true).fadeTo(300, 1);
    }
});
</script>

and… yeah, it works!
Thank you!
Now my problem would be to make it work also this way:

On top it is always visible.
After scroll:
Not visible on idle.
Visible when you move the mouse…

This is the current situation:

Klayz.com is for sale | HugeDomains

[PaulOB]

Hi,

Not sure if something like this might work.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
#fademe {
	position:fixed;
	top:0;
	left:0;
	right:0;
	min-height:50px;
	background:red;
}
</style>
</head>

<body>
<div id="fademe">testing</div>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<script src="http://code.jquery.com/jquery-latest.min.js"></script> 
<script>
$(window).on('scroll', function() {
    var header = $("#fademe");
	var timeoutID;
	 header.data('faded', 0).stop(true).fadeTo(300, 1);
	 timeoutID = window.setTimeout(fadeHeader, 4000);
	 function fadeHeader() {
    	//window.clearTimeout(timeoutID);
		if ($(this).scrollTop() > 50) {
        if (!header.data('faded')) header.data('faded', 1).stop(true).fadeTo(300, 0);
       } else if (header.data('faded')) {
        header.data('faded', 0).stop(true).fadeTo(300, 1);
      }
	}
});
</script>
</body>
</html>

[Norman]

@PaulOB

Not sure if something like this might work.

Thank you a lot, Paul!
It seems to be a little bit buggy. When you scroll, sometimes it is shown and sometimes it is not, plus it doesn’t work when you just move the mouse…
Anyway, thank you A LOT, again.

[PaulOB]

@Norman

It seems to be a little bit buggy. When you scroll, sometimes it is shown and sometimes it is not, plus it doesn’t work when you just move the mouse…

Yes it was pretty simplistic All it does is set the sticky header to visible if you scroll and then sets a timeout to fade it out which assumes you have stopped scrolling by then.

You will need a much more involved script to achieve what you want so hopefully one of the JS experts will jump in with a better method

[m3g4p0p]

@Norman

it doesn’t work when you just move the mouse

Hi Norman, the reason for this is that there’s no “mousemove” event handler. ;-) BTW, you don’t need to define that fadeHeader function each time you scroll – one time outside that callback is enough. What you need to do each time however is to clear the timeout and set it anew. Try this code at the bottom of your page:

(function() {
    var idleTime = 4000,
        fadeHeader = function() {
            if ($(window).scrollTop() > $('#fademe').height() 
                && $('#fademe').is(':visible')) {
                $('#fademe').fadeOut();      
            }      
        },
        mouseIdle = window.setTimeout(fadeHeader, idleTime);
      
    $(window).on('scroll mousemove', function() {
        if ($('#fademe').is(':hidden')) {
            $('#fademe').fadeIn();
        }
      
        window.clearTimeout(mouseIdle);
        mouseIdle = window.setTimeout(fadeHeader, idleTime);
    });
})();

fiddle

[PaulOB]

@PaulOB

so hopefully one of the JS experts will jump in with a better method

Thanks @m3g4p0p

[m3g4p0p]

Discourse sez a smiley alone isn’t descriptive enough… so anyway, here it is, haha… :-)

[Norman]

Ough, I just deleted my message, so I fortunately saved a copy:

Thank you a lot to both of you, guys.
@m3g4p0p, your script is just what I needed! Thanks a billion.

Klayz.com is for sale | HugeDomains

The problem for me now is how to apply the same to that navigation bar that is appended on scroll. It doesn’t enter in the #fademe div.
I thought that I could be able to just add that #fademe also to that element… but the problem is that I only have a <section> there and I add a class to it still via jQuery in order to make it
stickyed. Umhhh… right now I’m not coming with an idea for it…

I also tried removing first “scroll” and then “mousemove”… this because, for usability, probably would be best to have it appear only when you scroll the page, BUT stay active when you mouseover it. What do you think?

EDIT: I found these codes here:

$(".slide").mouseout(function () {
    $(this).find(".slide_panel").stop().slideToggle();
});

and

 $(".slide").on('mouseenter mouseleave', function () {
    $(this).find(".slide_panel").stop().slideToggle();

});

Could I do something like:

 $("body").on('mouseenter mouseleave', function () {
    $(this).find("#fademe").stop().slideToggle();

});

?

[m3g4p0p]

@Norman

I thought that I could be able to just add that #fademe also to that element…

Nooooo! Every ID is supposed to be unique! You might use a dedicated class for this behaviour, and which is independent of the sticky-behaviour of the navigation bar. (Sorry I can’t have a closer look at your page right now…)

@Norman

for usability, probably would be best to have it appear only when you scroll the page, BUT stay active when you mouseover it.

Yes, certainly! :-) But removing one of those event listeners won’t help, since neither of them has anything to do with the mouse hovering the element. The .hover() event would be responsible for this; however in this case you might use the :hover selector together with jQuery’s .is() filter (which we’ve been using above as well), like this:

// ...
    var idleTime = 4000,
        fadeHeader = function() {
            if ($(window).scrollTop() > $('#fademe').height() 
                && $('#fademe').is(':visible')
                && !$('#fademe').is(':hover')) {
                $('#fademe').fadeOut();      
            }      
        }
// etc....

The additional condition !$('#fademe').is(':hover') just reads: if #fademe is not hovered, fade it. Here’s the updated fiddle.

[Norman]

@m3g4p0p

Nooooo! Every ID is supposed to be unique! You might use a dedicated class for this behaviour, and which is independent of the sticky-behaviour of the navigation bar. (Sorry I can’t have a closer look at your page right now…)

Oh, true! You’re completely right! I just didn’t thought it was an ID and not a class!

Thank you again, m3g4p0p! I’m gonna try it…
All this stuff that you post me here/teach me here will surely help me a lot in the future when I’ll have some good time to invest in order to completely learn jQuery! So thanks a lot.

[Norman]

Klayz.com is for sale | HugeDomains

I implemented it and it works great! Thank you again.
I used another ID for the navbar and then now I have this code (which probably could be “merged” somehow as it does have some repetition. I don’t know!):

<script data-cfasync="true" defer="defer" type="text/javascript">
(function() {
    var idleTime = 800,
      fadeHeader = function() {
             if ($(window).scrollTop() > $('#fademe').height() 
          && $('#fademe').is(':visible')
        && !$('#fademe').is(':hover')) {
        $('#fademe').fadeOut();      
            }      
        },
        mouseIdle = window.setTimeout(fadeHeader, idleTime);
      
    $(window).on('mousemove', function() {
      if ($('#fademe').is(':hidden')) {
          $('#fademe').fadeIn();
    }
      
      window.clearTimeout(mouseIdle);
    mouseIdle = window.setTimeout(fadeHeader, idleTime);
  });
})();

(function() {
    var idleTime = 800,
      fadeNavbar = function() {
             if ($(window).scrollTop()>142 > $('#fademenav').height() 
          && $('#fademenav').is(':visible')
        && !$('#fademenav').is(':hover')) {
        $('#fademenav').fadeOut();      
            }      
        },
        mouseIdle = window.setTimeout(fadeNavbar, idleTime);
      
    $(window).on('mousemove', function() {
      if ($('#fademenav').is(':hidden')) {
          $('#fademenav').fadeIn();
    }
      
      window.clearTimeout(mouseIdle);
    mouseIdle = window.setTimeout(fadeNavbar, idleTime);
  });
})();

</script>

Anyway, maybe I dreamt too much. I mean, this is a cool effect, indeed… but seems to be still a little bit forced in my case. What do you think, as a “user” who browse the website? I’m undecided.