Page 1 of 1

Nagging Menu - fixed on scroll... Can it be quicker?

Posted: Thu May 14, 2015 10:55 am
by simonmlewis
This is the javascript for the nagging menu.
http://www.jqueryscript.net/menu/Fixed- ... -menu.html

I don't want it to "fade" I just want it to appear instantly.
Javascript is not my forte, so wonder if anyone can see how to adjust it to either fade by ms, or remove the fade so it just "appears" ?

Code: Select all

$(function(){
	
	var menu = $('#menu'),
		pos = menu.offset();
		
		$(window).scroll(function(){
			if($(this).scrollTop() > pos.top+menu.height() && menu.hasClass('default')){
				menu.fadeOut('fast', function(){
					$(this).removeClass('default').addClass('fixed').fadeIn('fast');
				});
			} else if($(this).scrollTop() <= pos.top && menu.hasClass('fixed')){
				menu.fadeOut('fast', function(){
					$(this).removeClass('fixed').addClass('default').fadeIn('fast');
				});
			}
		});

});

Re: Nagging Menu - fixed on scroll... Can it be quicker?

Posted: Thu May 14, 2015 11:57 am
by Celauran
http://api.jquery.com/fadeout/
Durations are given in milliseconds; higher values indicate slower animations, not faster ones. The strings 'fast' and 'slow' can be supplied to indicate durations of 200 and 600 milliseconds, respectively. If any other string is supplied, or if the duration parameter is omitted, the default duration of 400 milliseconds is used.
Basically replacing 'fast' with a number smaller than 200 will do.

Re: Nagging Menu - fixed on scroll... Can it be quicker?

Posted: Thu May 14, 2015 12:23 pm
by simonmlewis
It still "fades". I Was expecting it to just be there. On/Off... not "iinnn"...ouuut"...

Re: Nagging Menu - fixed on scroll... Can it be quicker?

Posted: Thu May 14, 2015 12:40 pm
by Celauran
You can replace fadeIn/fadeOut with show/hide

Re: Nagging Menu - fixed on scroll... Can it be quicker?

Posted: Thu May 14, 2015 2:06 pm
by simonmlewis
How do you do that, when you have the 'fast' in them?
I did try hide(function(){ ....
And with the fadein, "show();

But all I got was it flickering.

Code: Select all

$(function(){
	
	var menu = $('#menu'),
		pos = menu.offset();
		
		$(window).scroll(function(){
			if($(this).scrollTop() > pos.top+menu.height() && menu.hasClass('default')){
				menu.fadeOut('fast', function(){
					$(this).removeClass('default').addClass('fixed').fadeIn('fast');
				});
			} else if($(this).scrollTop() <= pos.top && menu.hasClass('fixed')){
				menu.fadeOut('fast', function(){
					$(this).removeClass('fixed').addClass('default').fadeIn('fast');
				});
			}
		});

});

Re: Nagging Menu - fixed on scroll... Can it be quicker?

Posted: Thu May 14, 2015 2:18 pm
by Celauran
Untested, but I'd start with something like this:

Code: Select all

$(function() {
       
    var menu = $('#menu'),
        pos = menu.offset();
           
    $(window).scroll(function() {
        if($(this).scrollTop() > pos.top+menu.height() && menu.hasClass('default')) {
            menu.hide();
            $(this).removeClass('default').addClass('fixed').show();
        } else if($(this).scrollTop() <= pos.top && menu.hasClass('fixed')) {
            menu.hide();
            $(this).removeClass('fixed').addClass('default').show();
        }
    });

});

Re: Nagging Menu - fixed on scroll... Can it be quicker?

Posted: Thu May 14, 2015 2:20 pm
by Celauran
I'm surprised setting the fade time really low wasn't sufficient.

Code: Select all

$(function() {
       
    var menu = $('#menu'),
        pos = menu.offset();
           
    $(window).scroll(function() {
        if($(this).scrollTop() > pos.top+menu.height() && menu.hasClass('default')) {
            menu.fadeOut(10, function() {
                $(this).removeClass('default').addClass('fixed').fadeIn(10);
            });
        } else if($(this).scrollTop() <= pos.top && menu.hasClass('fixed')) {
            menu.fadeOut(10, function() {
                $(this).removeClass('fixed').addClass('default').fadeIn(10);
            });
        }
    });

});

Re: Nagging Menu - fixed on scroll... Can it be quicker?

Posted: Thu May 14, 2015 2:26 pm
by simonmlewis
The show/hide didn't work at all. It didn't even appear on scroll down, or appear again when back at top.
However, setting face to 10, DOES do the trick. Thanks.