Easy Sticky-nav using alloy.

Want a quick and easy way to make a sticky nav right out of the box with liferay? Thanks to AUI with 10 lines of code you can turn your navigation bar into a sticky nav. This is especially useful with long scrolling pages, where it is useful to see the navigation as you scroll.

You can see this in action on Liferay's Solution Forum sites.

Some additional styling may be needed to make it look the way you would like, but this essentially clones you navigation and then when you scroll pass the #navigation element it fixes the clone to the top of the page as you scroll. Pretty cool and easy to add. Enjoy!

Blogues
Hi Ryan, I really would like to use this feature, but sadly it's not working in my app (Liferay 6.1).
The result I got is that a the page bottom the navigation elements are rendered a second time (without style).
The actual top navigation element in my page is <nav id="navigation" ....> (liferay standard i think), I copied the script above to the main.js of my theme.

Any suggestions?

Thank in advance
Hi Andre,

If you include the js code in your main.js file, you cloned navigation bar will be:
<nav class="sort-pages modify-pages lfr-hudcrumbs" style="left: 658px; top: 0px; width: 400px;">
<ul>
<li class="selected"> ... </li>
<li> ... </li>
<li> ... </li>
<li>… <li>
</ul>
</nav>

So you just have to apply css styles related to lfr-hudcrumbs class selector.