Cezz
OMG Member
- Joined
- Sep 24, 2010
- Messages
- 581
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...
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" />
Disclaimer: it is no where near perfect, and I offer without warantee or support!