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

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

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

Post 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');
				});
			}
		});

});
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

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

Post 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.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

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

Post by simonmlewis »

It still "fades". I Was expecting it to just be there. On/Off... not "iinnn"...ouuut"...
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

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

Post by Celauran »

You can replace fadeIn/fadeOut with show/hide
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

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

Post 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');
				});
			}
		});

});
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

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

Post 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();
        }
    });

});
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

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

Post 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);
            });
        }
    });

});
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

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

Post 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.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
Post Reply