• This forum has been archived. New threads and replies may not be made. All add-ons/resources that are active should be migrated to the Resource Manager. See this thread for more information.

Floating Navigation Bar

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...
  1. 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>
  2. 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!
 
I did the same thing for one of my forums a couple of days ago, yours seems much simpler though :P
 
I did the same thing for one of my forums a couple of days ago, yours seems much simpler though :p

It may seem simpler but I spend quite a while on trying to make it that way :P... The code was originally about 15-20 lines long and I spend more time trying to optimize and minimise the code than I actually spent coding the functionality :P...


I shall take that as a good thing and return with a :D

Thx great job :)
That's awesome Cezz.

More than welcome, it was something I wanted to I created it and though why not share !
 
For some reason I can see a horizontal scroll bar when your site is in its natural state. The moment it is scrolled enough to activate desired action of your modification, the horizontal scroll bar disappears. It reappears when scrolled up again. :)

I have noticed this too, think this may be completely unrelated to this mod and actually related to another modification I made to the header (may remove it on my next day off).

The login dropdown disappears after scrolling down then up.

Bug Confirmed, Found a fix for it already will update first post on my next day off (didn't notice this as normally signed in so thanks :))
 
Top Bottom