gistfile1.js

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/prototype/1.7/prototype.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/scriptaculous/1.9/scriptaculous.js?load=effects"></script>
<script type="text/javascript">
  var shade = $('shade'), offset = shade.cumulativeOffset()['top'];
  var marker = new Element('span');
  var links = $$('#shade a');
  links.each(function(link){
    var target = $(link.href.split('#').last());
    if(!!target) link['pane'] = target;
  });
  shade.insert({after: marker});
  Event.observe(window, 'scroll', function(evt){
    links.each(function(link){
      if(link.pane && link.cumulativeScrollOffset()['top'] > link.pane.positionedOffset()['top'] - 20){
        links.invoke('removeClassName', 'active');
        link.addClassName('active');
      }
    });
    if(document.viewport.getScrollOffsets()['top'] < offset){
      if(shade.up() && shade.up().match('body')){
        shade.setStyle('position:absolute; bottom: 0; top: auto; z-index: auto');
        marker.insert({before: shade.remove()});
        //$('logoholder').insert($('logo').remove());
      }
    }else{
      if(shade.next() && shade.next().match('span')){
        shade.setStyle('position:fixed; bottom: auto; top: 0; z-index: 200');
        $$('body').first().insert(shade.remove());
        //$('shade').insert($('logo').remove());
      }
    }
  });
  $('shade').on('click', 'a[href*="#"]', function(evt, elm){
    var target = $(elm.href.split('#').last());
    if(!!target){
      evt.stop();
      new Effect.ScrollTo(target, {duration: 0.4});
    }
  });
</script>