How to hide div when scrolling down and then show it as you scroll up?

Question

Okay bear with me, I know this might have been asked a few times but I can't get the exact answer after searching a bit.

Basically what I want is as the user starts to scroll down, after a certain height the div disappears.. and it remains disappeared until the user starts to scroll up. Right when the user starts to scroll up, the div appears again. I need some sort of fade effects for this as well.

This is what I've come up with by looking at other answers so far. With this, the div does disappear after a certain height as you scroll down, but it only re-appears when you reach that same height when you scroll up. I want the div to immediately show itself when the user starts to scroll up. This code doesn't have any animations either...

jQuery(window).scroll(function() {

    if (jQuery(this).scrollTop()>0)
     {
      jQuery('.myDIV').fadeOut();  
     }
    else
     {
      jQuery('.myDIV').fadeIn();
     }
 });

Solution 1

You can try headroom.js which is a tiny little javascript plugin to do the trick.

Solution 2

I'm not the greatest JQuery-artist either, but I think this should work:

var mywindow = $(window);
var mypos = mywindow.scrollTop();
mywindow.scroll(function() {
    if(mywindow.scrollTop() > mypos)
    {
        $('.myDIV').fadeOut();  
    }
    else
    {
        $('.myDIV').fadeIn();
    }
    mypos = mywindow.scrollTop();
 });

You can see mypos is updated every time the user scrolls, up or down.

Edit

I've made some updates upon your request in a fiddle: http://jsfiddle.net/GM46N/2/. You can see in the js-part of the fiddle that I've made two options - one is with .fadeIn() and .fadeOut() (this time working - on your site the code I provided is not running), the second one is using .slideToggle().

Here's the updated js:

var mywindow = $(window);
var mypos = mywindow.scrollTop();
var up = false;
var newscroll;
mywindow.scroll(function () {
    newscroll = mywindow.scrollTop();
    if (newscroll > mypos && !up) {
        $('.header').stop().slideToggle();
        up = !up;
        console.log(up);
    } else if(newscroll < mypos && up) {
        $('.header').stop().slideToggle();
        up = !up;
    }
    mypos = newscroll;
});

I've also added an extra variable, up, to only fire the events when the user scrolls up the first time and the next time the toggle gets fired is when he scrolls down and so on. Otherwise the events are fired maaaaany times (you can test it by using the previous code with .slideToggle() to see the massive amount of event-firing).

re-edit: I've also added .stop(), so now if there is still an effect running that effect gets stopped first, to prevent lag if a user quickly scrolls up&down.

Comments

[Maaz]

This works perfectly. How would I go about adding some fade in / fade out effects? Currently it just appears or disappears. Is it possible for me to like bring it from the top, and then when it disappear it removes it self by going to the top? (This is a menu) by the way.

[jdepypere]

Currently you're using .fadeIn() and .fadeOut(). To do what you desire, theres multiple options You can use .slideToggle(), check the link for the effect. This does look a little weird sometimes, so if you just want it to slide in it's entirety and not 'unfold' like the .slideToggle() does, what I use is .animate() and edit the 'top' css like so: $('.something').animate({top:"10px"});.

[Maaz]

You'd have to show me some examples incorporated in the actual answer. I tried .animate and it takes it's time to actually move as you scroll up, I think that's because of the way you use the scroll up position and update the variable everytime the user scrolls up.

[jdepypere]

Since you already have some code, could you please somehow show it or put it in a jsfiddle? Would make it a lot easier for me to play around with and understand what you want.

[Maaz]

I haven't entirely used it, but you can see it up on here: phanime.com The way the menu moves.

[Maaz]

In your JSfiddle this works great. However, once i've implemented it on the site, which you can see the animation is not fluid at all, in fact, I can barely see the animation at all.

[jdepypere]

I don't know how come, your FPS is okay so that isn't the issue. Nevertheless, I must say your site's code is pretty chaotic. Some js files you include at the top, some at the bottom, ... Just saying it's not good practice. For a fix - I think it's just very browser-intensive, you have dozens of js scripts here and there... If you type jQuery('.phanimeBar').animate(({top:'1000px'}); in the console of your browser, you can see it does indeed move but not that smooth. Perhaps other js things are hogging it - I have no idea...

[Maaz]

Where would I put this code 'jQuery('.phanimeBar').animate(({top:'1000px'});' with regards to the original? As for cleaning up the jQuery code, would it be better to put them in .js file and call it in the header? Currently I just put it in the .php files

[jdepypere]

I don't know which browser your using, but in Chrome press cntrl+shift+j, go to the console-tab and enter the code there. Ideally, put all .css-files in the header, and ALL the .js-files and other javascript right above </body>. Doing this, the js is only loaded once all elements are loaded, so you don't need jQuery(document).ready(function(){ //mycode here. Using the PageSpeed tool I've analyzed your site, and it scores a 50/100. Running the tool you can see where your site can be improved. Nevertheless weird that fps seems ok..

[peljoe]

Is there a way with this workaround to prevent a scroll up to fire when slideToggle() occurs? I have a few pages with a 'short scrollbar' and when scrolling down, the header starts to be hidden, but while it is doing, it fires scroll up, and then it is back shown... Can't find a workaroud in this scenario.