14

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();
     }
 });
5
  • An option would be to store the .scrollTop() value in an extra var. Then when scrolled, check if the new .scrollTop() is greater than or smaller than the stored value, and do the things accordingly and store the new value.
    – jdepypere
    Jul 28, 2013 at 13:13
  • Only problem is, I'm not too great with jQuery.
    – Maaz
    Jul 28, 2013 at 13:18
  • jQuery(this).scrollTop()>0 ?? and when do you think your scrollTop will be less than 0
    – exexzian
    Jul 28, 2013 at 13:47
  • I have answered a similar question here: stackoverflow.com/questions/17870659/… with a small modification for fade you have this: jsfiddle.net/frZ9j/3
    – jerrylow
    Jul 30, 2013 at 5:11
  • @jerrylow this seems to work, however, if I scroll down a little and then go back up the bar actually disappears but doesn't re-appear.
    – Maaz
    Aug 5, 2013 at 2:33

3 Answers 3

29

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.

10
  • 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.
    – Maaz
    Jul 28, 2013 at 14:08
  • 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"});.
    – jdepypere
    Jul 28, 2013 at 15:10
  • 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.
    – Maaz
    Jul 28, 2013 at 21:15
  • 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.
    – jdepypere
    Jul 29, 2013 at 8:52
  • I haven't entirely used it, but you can see it up on here: phanime.com The way the menu moves.
    – Maaz
    Jul 29, 2013 at 22:26
17

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

0
0

I used your code, just replaced .slideToggle() with .fadeIn and .fadeOut and it worked out great.

0

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.