Resource icon

Unmaintained How to create a a sticky navigation menu 2014-03-18

No permission to download
Compatible XF 1.x versions
  1. 1.1
  2. 1.2
  3. 1.3
I've searched the forums for a solution in the past couple of days and I haven't found any resource or elegant solution to this simple style tweak.

First of all, you need to add a css class in your extra.css file:

Code:
.floaty {
position: fixed;
min-width:100% !important;
z-index:9999;
}

Then you have to create a template, let's name it "floating_bar" and add the following code do it:

Code:
<script>
   jQuery(document).ready(function ($){
       $(window).bind('scroll', function() {
       var navHeight = ( $(window).scrollTop() );
             if (navHeight > 100) {
                 $('#navigation').addClass('floaty');
             }
             else {
                 $('#navigation').removeClass('floaty');
             }
        });
    });
</script>

Then you have to go to your navigation template and add the following line:

Code:
<xen:include template="floating_bar" />

That's it! If you have a custom theme, you have to see the class of the menu there and replace #navigation with #custom or .class (depending on the case).

If you want to see an example, go to my eso forum, login with user: test pass: test and do some scrolling :)
  • screen.webp
    screen.webp
    44.3 KB · Views: 926
Author
vexx
Downloads
79
Views
881
First release
Last update

Ratings

0.00 star(s) 0 ratings
Top Bottom