Floating bar (aka Rocketbar)

by jorgeluis

HTML

<!-- 
from Rocketbar: 
http://addyosmani.com/blog/rocketbar/
-->

<div id="floatingbar">  
<ul>  
<li><img border="0" alt="" src="images/rocketbar.png"></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 href="javascript:#"><button title="Scroll" id="dirbutton" class="default">             <img border="0" alt="" src="images/bottomarrow.png">         </button></a></li>  
</ul>  
</div> 


<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam aliquam dapibus convallis. Vivamus at interdum augue. Etiam quis urna risus. Curabitur odio augue, vestibulum in blandit in, tempus dapibus orci. Integer sit amet mattis nisi. In dui tellus, fermentum et faucibus sed, consequat pharetra libero. Aliquam erat volutpat. Integer nec mauris vitae enim volutpat consequat a id arcu. Fusce auctor sapien sed eros interdum nec congue massa dictum. Curabitur et tortor at risus vestibulum rutrum. Duis pharetra elementum augue, id pretium nunc egestas et. Integer vitae augue eu orci convallis eleifend vitae at purus.
</p>
<p>
Cras nisl purus, ultricies in sodales nec, pretium sed magna. Fusce consequat ante et nisi viverra consectetur. Etiam eleifend viverra porta. Pellentesque accumsan varius quam a feugiat. Sed massa augue, mattis at consequat at, congue vulputate quam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris laoreet lectus sed neque dictum accumsan. Morbi non nisi in ipsum euismod rhoncus. Vestibulum venenatis nibh tortor, id blandit metus. Maecenas et est ut ipsum tincidunt dapibus. Quisque sed dui neque, et pulvinar justo. Pellentesque sed fringilla metus....

CSS

#floatingbar,#minibar{
 border:1px solid #F1F1F1;
 height:50px;
}

#floatingbar ul, #minibar ul{
 list-style-type:none;
 margin-top:-3px;
 margin-left:-37px;
 
}

#floatingbar ul li,#minibar ul li{
 float:left;
 padding:10px;

}

#floatingbar ul li a,#minibar ul li a{
 text-decoration:none;

}

#minibar { display:none;}



.floater{
position:fixed;
top:0px;
z-index:999;
height:50px;
width:960px;
border-top:none;
background-color: #F1F1F1;
border:1px solid #000000;
color:#ccc;
display:block;
clear:both;
margin-left:auto;
margin-right:auto;
float:left;

box-shadow: 0 0 7px rgba(0,0,0,0.4);
    -webkit-box-shadow: 0 0 7px rgba(0,0,0,0.4);
    -moz-box-shadow: 0 0 7px rgba(0,0,0,0.4);
    border-radius: .214em;
    -webkit-border-radius: .214em;
    -moz-border-radius: .214em;

}



button {
    position: relative;
    margin: 0 .5em .5em .5em;
    padding: 0.5em 1.5em;
    font-size: 14px;
    font-weight: bold;
    font-family:Arial;
    color: #4f4f4f;
    text-shadow: 0 1px 1px #fff;
    background: #ddd;
    background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#c4c4c4));
    background: -moz-linear-gradient(top, #ededed, #c4c4c4);
    border: 1px solid #acacac;
    border-top-color: #bdbdbd;
    letter-spacing:-1px;
    border-bottom-color: #949494;
    border-radius: .214em;
    -webkit-border-radius: .214em;
    -moz-border-radius: .214em;
    transition: all .2s ease-in-out;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    
             box-shadow: inset 0 1px 0 #fff;
            -webkit-box-shadow: inset 0 1px 0 #fff;
            -moz-box-shadow: inset 0 1px 0 #fff;
            -o-box-shadow: inset 0 1px 0 #fff;
           
            
    cursor: pointer;
    }
    button:hover,
    button:focus {
        
        
        box-shadow: 0 0 7px rgba(0,0,0,0.4), inset 0 1px 0 #fff;
            -webkit-box-shadow: 0 0 7px rgba(0,0,0,0.4), inset 0 1px 0...

JavaScript

$(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= $('#minibar').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').hide();
         $('#minibar').show();
         $('#minibar').addClass('floater');
        }
        else
        {
         $('#minibar').hide();
         $('#floatingbar').show();

         }
         
         
         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');
             
          }
});
 
});