title: Converting jquery to prototype.js for scrollTop equivalent change to header as you scroll down
body: <p>I am still a relative noob when it comes to javascript and especially going into jquery, prototype.js and such.  I am trying to duplicate something similar to the <a href="http://giglocator.com" rel="nofollow noreferrer">http://giglocator.com</a> header (or, to a lesser extent, TechCrunch's redesigned header) where a portion of the header stays on screen once you scroll past a certain point.  This boils down to changing header code from relative position to fixed position once a person has scroled past xxx number of pixels.  I came across vinceh's answer at <a href="https://stackoverflow.com/questions/6687580/header-changes-as-you-scroll-down-jquery">Header changes as you scroll down (jQuery)</a> which included a fiddle ( <a href="http://jsfiddle.net/KEjfe/" rel="nofollow noreferrer">http://jsfiddle.net/KEjfe/</a> ) he created.  I managed to tweak his code up to more or less do a giglocator type header using the following script code instead:</p>
  
  <pre><code>$("#body").scroll( function() {
      var value = $(this).scrollTop();
      if ( value &gt; 120 )
          $("#header").css("position", "fixed").css("top", "0");
      else
          $("#header").css("position", "relative").css("top", "120px");
  });
  </code></pre>
  
  <p>So that is great except that I am trying to do this with a forum software package that uses prototype.js and scriptaculous.  It seems like a waste to load jquery just for this (in addition to the others).  Is there any way to convert the code above so that it works in prototype/scriptaculous?  Or is there a way to just load jquery's scrolltop?</p>