%= javascript '/mojo/jquery/jquery.js'
<div id="mojobar">
  %= stylesheet scoped => 'scoped', begin
    #mojobar {
      background-color: #1a1a1a;
      background: -webkit-linear-gradient(top, #2a2a2a 0%, #000 100%);
      background: -moz-linear-gradient(top, #2a2a2a 0%, #000 100%);
      background: linear-gradient(top, #2a2a2a 0%, #000 100%);
      box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.6);
      height: 46px;
      overflow: hidden;
      position: absolute;
      text-align: right;
      vertical-align: middle;
      width: 100%;
      z-index: 1000;
    }
    #mojobar-logo {
      float: left;
      margin-left: 5em;
      padding-top: 3px;
    }
    #mojobar-links {
      display:table-cell;
      float: right;
      height: 60px;
      margin-right: 5em;
      margin-top: 0.8em;
    }
    #mojobar-links a {
      color: #ccc;
      font: 1em 'Helvetica Neue', Helvetica, sans-serif;
      font-weight: 300;
      margin-left: 0.5em;
      text-decoration: none;
      transition: all 200ms ease-in-out;
    }
    #mojobar-links a:hover { color: #fff }
    #mojobar-links input {
      border: 0;
      border-radius: 10px;
      display: inline;
      margin-left: 1em;
      padding: 3px;
    }
    #mojobar-links input:focus { outline: 0 }
    #mojobar-links form { display: inline }
  % end
  <div id="mojobar-logo">
    %= link_to 'http://mojolicio.us' => begin
      %= image '/mojo/logo-white.png', alt => 'Mojolicious logo'
    % end
  </div>
  <div id="mojobar-links">
    %= link_to Documentation => 'http://mojolicio.us/perldoc'
    %= link_to Wiki => 'https://github.com/kraih/mojo/wiki'
    %= link_to GitHub => 'https://github.com/kraih/mojo'
    %= link_to CPAN => 'http://metacpan.org/release/Mojolicious/'
    %= link_to MailingList => 'http://groups.google.com/group/mojolicious'
    %= link_to Blog => 'http://blog.kraih.com'
    %= link_to Twitter => 'http://twitter.com/kraih'
    %= form_for 'http://google.com/cse' => (target => '_blank') => begin
      %= hidden_field cx => '014527573091551588235:pwfplkjpgbi'
      %= hidden_field ie => 'UTF-8'
      %= search_field 'q', placeholder => 'Search'
    %= end
  </div>
</div>
%= javascript begin
  $(window).load(function () {
    if (window.location.hash) {
      var tweak = $(window.location.hash).offset().top - 50;
      $('html, body').animate({scrollTop:tweak}, 1);
    }
    var mojobar = $('#mojobar');
    var start   = mojobar.offset().top;
    var fixed;
    $(window).scroll(function () {
      if (!fixed && (mojobar.offset().top - $(window).scrollTop() < 0)) {
        mojobar.css('top', 0);
        mojobar.css('position', 'fixed');
        fixed = true;
      } else if (fixed && $(window).scrollTop() <= start) {
        mojobar.css('position', 'absolute');
        mojobar.css('top', start + 'px');
        fixed = false;
      }
    });
  });
  $(document).ready(function() {
    $('a[href^="#"]').addClass('mojoscroll');
    $(".mojoscroll").click(function(e) {
      e.preventDefault();
      e.stopPropagation();
      var parts  = this.href.split("#");
      var hash   = "#" + parts[1];
      var target = $(hash);
      var top    = target.offset().top - 50;
      var old    = target.attr('id');
      target.attr('id', '');
      location.hash = hash;
      target.attr('id', old);
      $('html, body').animate({scrollTop:top}, 1);
    });
  });
% end