CODEWITHSUNDEEP
jquerymenuscroll
esther
esther

Reputation: 55

Menu to hide and show again when scrolling

I'm trying to hide the menu when you click on it. When you click on the menu it slides to a particular part of the side (onepage website). I like to hide the menu when it's scrolling down/up and shows itself again when it reaches the point on the page or when you stop scrolling.

$('.hoofdnav ul li a').click(function() {
    $('header.HoofdNav').fadeOut('slow', function() {
        setTimeout(showMenu, 1000);
    });
});
function showMenu() {
        $('header.HoofdNav').fadeIn('slow');
};

I also tried using slideUp and slideDown instead of fadeOut/In

This is working, but not how I have in mind.

tnx

Upvotes: 1

Views: 1211

Answers (1)

FVlad
FVlad

Reputation: 317

Is there a way to slide and fade at the same time?

Probably you should use .animate(). Here is the reference. In your case it should look something like this:

function hideMenu(){
 $('header.HoofdNav').stop().animate({
  opacity: 0,
  width: 0
 });
}

function showMenu(){
 $('header.HoofdNav').stop().animate({
  opacity: 1,
  width: '100%'
 });
}

How to hide the menu during scroll and showing when you stop scrolling? (maybe a tutorial or something)

To track scrolling you can use .scroll(). Check it here. It triggers multiple times during scrolling, so I would recommend to make a timeout for e.g. 1 second to show the menu. Here is an example:

var timeout = false, afterScrollingWait = 1000; // here 1000 is time in milliseconds, play with it to make it the best for your app
$(document).scroll(function(){
 hideMenu();
 if (timeout) clearTimeout(timeout);
 setTimeout(showMenu, afterScrollingWait); 
});

Upvotes: 1

Related Questions