Lock the menu header in place when the page starts scrolling. Taken from www.lesscss.org, the docked CSS class makes the background semi-transparent.

headerlock.js

window.onload = function () {
          var menu = document.getElementById('menu');
          var init = menu.offsetTop;
          var docked;

          window.onscroll = function () {
            if (!docked && (menu.offsetTop - scrollTop() < 0)) {
              menu.style.top = 0;
              menu.style.position = 'fixed';
              menu.className = 'docked';
              docked = true;
            } else if (docked && scrollTop() <= init) {
              menu.style.position = 'absolute';
              menu.style.top = init + 'px';
              menu.className = menu.className.replace('docked', '');
              docked = false;
            }
          };