RocketBar – Menú de navegación fijo con jQuery CSS3

Un menú que se mantiene fijo mientras se desplaza la página no es nuevo. Lo que si es nuevo implementarlo usando la biblioteca jQuery y CSS3. RocketBar – A jQuery And CSS3 Persistent Navigation Menu es un tutorial que publica el blog addyosmani.com y que explica (en inglés) como implementarlo. Así mismo presenta tres variaciones que se pueden ver en funcionamiento desde la página del tutorial.

La implementación requiere de un código Javascript similar al siguiente:

<script>
$(document).ready(function()
{
$.preloadImages = function()
{
for(var i = 0; i<arguments.length; i++)
{
$("<img />").attr("src", arguments[i]);
}
}
$.preloadImages("images/toparrow.png","images/bottomarrow.png");
var $top1= $('#floatingbar').offset().top + 20;
var $mid1 = Math.floor($(window).height() / 2);
$('#dirbutton').data('mode','scrollup');
$('#dirbutton').click(function()
{
$mode = $(this).data('mode');
switch($mode)
{
case 'scrolldown':
$('html, body').animate({scrollTop:0}, 'slow');
return false;
break;
case 'scrollup':
$scrollpos = $('body').outerHeight();
$('html, body').animate({scrollTop:$scrollpos}, 'slow');
return false;
break;
}
});
$(window).scroll(function()
{
if ($(window).scrollTop()>$top1)
{
$('#floatingbar').addClass('floater');
}
else
{
$('#floatingbar').removeClass('floater');
}
if($(window).scrollTop() > $mid1)
{
$('#dirbutton').find('img').attr('src','images/toparrow.png');
$('#dirbutton').data('mode','scrolldown');
$('#dirbutton').show();
}else
{
$('#dirbutton').find('img').attr('src','images/bottomarrow.png');
$('#dirbutton').data('mode','scrollup');
}
});
});
</script>

También crear la estructura del menú en HTML:

<div id="floatingbar">
<ul>
<li><img border=0
src="images/rocketbar.png"></img></li>
<li><a
href="http://www.addyosmani.com"><button>Home</button></a></li>
<li><a
href=""><button class="default">About</button></a></li>
<li><a
href=""><button class="default">Services</button></a></li>
<li><a
href=""><button class="default">Pricing</button></a></li>
<li><a
href=""><button class="default">Blog</button></a></li>
<li><a
href=""><button class="default">Contact</button></a></li>
<li><a h
ref="javascript:#"><button title="Scroll" id="dirbutton" class="default">
<img border=0 src="images/bottomarrow.png"></img>
</button></a></li>
</ul>
</div>

Además hay que enlazar la siguiente biblioteca:

<script type="text/javascript"
src="https://code.jquery.com/jquery-1.4.2.min.js"></script>

Como se puede apreciar este tutorial bastante sencillo de implementar en cualquier desarrollo web. Sólo hay que dedicar algo de tiempo a comprender el funcionamiento, algo que resultará muy sencillo a cualquier que tenga algo de práctica.

RocketBar

Sitio: addyosmani.com/blog/rocketbar