1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.
  2. This forum is for release discussion only. Discussions that do not relate specifically to the resource release should be discussed in another, more appropriate forum.
    Dismiss Notice
  3. 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

Discussion in 'Template Modifications [Archive]' started by Cezz, Aug 30, 2011.

  1. Cezz

    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...

    1. Create a template named float_navigation inside paste the following code :-
      <script type="text/javascript">
       $(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'}):
               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);}
    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!
    otto, Mrallananas, z3r010 and 10 others like this.
  2. Lenin

    Lenin Active Member

    thank you very much, it works great ... I like ....
  3. Cezz

    Cezz Well-Known Member

    Any chance you can share you site URL, would like to see how it is working with other styles!
  4. James

    James Well-Known Member

    any chance you can share yours so I can see this in action? :D
  5. Lenin

    Lenin Active Member

    ok my site is http://foro.kpumco.com
    I like the look on my site
  6. Cezz

    Cezz Well-Known Member

  7. Cezz

    Cezz Well-Known Member

    Cool it is working just as intended I like :D thank you for sharing...
  8. Lenin

    Lenin Active Member

    thank you for sharing with us ....
  9. James

    James Well-Known Member

    That's awesome Cezz.
  10. ShadyX

    ShadyX Well-Known Member

    I did the same thing for one of my forums a couple of days ago, yours seems much simpler though :p
  11. DRE

    DRE Well-Known Member

  12. cobra1162

    cobra1162 Active Member

    Thx great job :)
  13. Cezz

    Cezz Well-Known Member

    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

    More than welcome, it was something I wanted to I created it and though why not share !
  14. MarcosPreviato

    MarcosPreviato Active Member

    Hi, how to add new links on the bar?

  15. ibnesayeed

    ibnesayeed Well-Known Member

    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. :)
  16. a legacy reborn

    a legacy reborn Well-Known Member

  17. Cezz

    Cezz Well-Known Member

    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).

    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 :))
  18. a legacy reborn

    a legacy reborn Well-Known Member

    No problem it's how I roll :p.
  19. Cezz

    Cezz Well-Known Member

    I should correct myself also

  20. a legacy reborn

    a legacy reborn Well-Known Member

    True that :) lul. Thanks for this BTW.

Share This Page