floating_menu.erb

<style>
#menu {
    z-index: 100;
    position: absolute;
    left: 30%;
}

#menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

#menu li {
    float: left;
    padding-left:5px;
    padding-right:5px;
    padding-top:5px;
    padding-bottom:5px;
}

#menu li a {
    z-index: 100;
    background: #ffffff;
    display: block;
    height: 2em;
    line-height: 2em;
    width: 6em;
    border:1px solid #ddd;
    color: #0d2474;
    text-decoration:none;
    text-align: center;
}
</style>
<div class='example'>
  <h3>Floating Menu</h3>
  <div id='menu'>
    <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#news">News</a></li>
      <li><a href="#contact">Contact</a></li>
      <li><a href="#about">About</a></li>
    </ul>
  </div>
  <div class='row'>
    <div class='scroll large-10 columns large-centered'>
      <% @copy.each do |copy| %>
        <p><%= copy %></p>
      <% end %>
    </div>
  </div>
</div>
<script src='/js/vendor/stickyfloat.js'></script>
<script>
$('#menu').stickyfloat( {duration: 1} );
</script>