[Tweak] Floating Navigation

[Cezz]

This is a template tweak I have just made myself and wanted to share with others in case they want the same thing...

So Basically all this does is looks if the page is scrolled more than the height of the header then it fixes the secondary links to the top of the browser and also fades the bar out... upon hover over the bar unfades to make it usable.

I have tested this on both the default and flexstyle styles and it seems to work well...

Instructions...

1. Create a template named float_navigation inside paste the following code :-
   

   <script type="text/javascript">
    $(function() {
        $(window).scroll(function(){
            ($(window).scrollTop() > {xen:calc '@headerLogoHeight + (@headerTabHeight * 2)'}) ?
                $('#header').stop().animate({'opacity':'0.5'},400).css({'position':'fixed','top':'-{xen:calc '@headerLogoHeight + @headerTabHeight'}px','z-index':'60'}):
                $('#header').stop().animate({'opacity':'1'},400).css({'position':'absolute','top':'0px'});
        });
        $('#header').hover(
            function(){ if ($(window).scrollTop() > {xen:calc '@headerLogoHeight + (@headerTabHeight * 2)'}) $(this).stop().animate({'opacity':'1'},400);},
            function(){ if ($(window).scrollTop() > {xen:calc '@headerLogoHeight + (@headerTabHeight * 2)'}) $(this).stop().animate({'opacity':'0.5'},400);}
        );
    });
    </script>

2. Then Edit template page_container_js_body at the bottom add
   

   <xen:include template="float_navigation" />

That is it, as simple as that... I could make this better and did consider making it into an add-on so I could include options and or possibly use template_hooks but it is such a simple tweak in the end I don't think it would be worth it.

Disclaimer: it is no where near perfect, and I offer without warantee or support!

 

[Floris]

very cool, thanks for sharing

 

[Vincent_imported]

Wow cool!
I like it

 

[Nix]

Nice work, thank-you for sharing

 

[Cezz]

Thanks all... if anyone uses it would love if they could share a link to their implementation really want to see if it plays well with other styles etc... so far only tested on default and flexstyle.

 

[The Pet Board]

Do you have a live site or demo that shows how this works?

 

[Cezz]

Sure check it out on http://www.wereadit.co.uk/ just start scrolling down the page and you will see the navigation stick!

 

[Nix]

Sure check it out on http://www.wereadit.co.uk/ just start scrolling down the page and you will see the navigation stick!

Cool, I just checked it out

 

[AcidBurn]

Super Cool I added and love it