Cezz
Well-known member
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...
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!
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...
- Create a template named float_navigation inside paste the following code :-
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>
- Then Edit template page_container_js_body at the bottom add
Code:<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!