title: Scrolling into view an element hidden beneath a persistent header
body: <p>I'm currently working under some tight restrictions with regard to what I can do with JavaScript (no frameworks such as jQuery for example, and nothing post Firefox 2.0).</p>
  
  <p>Here's my problem; I have a persistent header floating at the top of the page. I have input elements scattered throughout (we're replicating a paper form exactly, including the background image). There is a field nearing the bottom of the page that gets tabbed out (using keyboard tab button) and puts the focus on a field at the top of the page. Firefox will automatically scroll the field "into view". However, while the browser believes the field is in view, it's actually hidden beneath the persistent header.</p>
  
  <p><a href="http://imageshack.us/a/img546/5561/scrollintoviewproblem.png" rel="nofollow">http://imageshack.us/a/img546/5561/scrollintoviewproblem.png</a></p>
  
  <p>The blue field above is accessed by hitting "tab" from another location on the page. The browser believes the field has been scrolled into view, but it's in fact hidden <strong>beneath</strong> the floating persistent header.</p>
  
  <p>What I'm looking for is ideas as to how I can detect that the field is beneath this header and scroll the entire page accordingly.</p>
  
  <p>I've tried a few variations of margin &amp; padding (see other considerations at <a href="http://code.stephenmorley.org/javascript/detachable-navigation/#considerations" rel="nofollow">http://code.stephenmorley.org/javascript/detachable-navigation/#considerations</a>) without luck. I've also tried calling the JavaScript function "scrollIntoView(element)" each time we focus on a field, but given the amount of fields on the form (and the fact that we're aligning them to match the background image of a paper form exactly), this was causing some pretty severe "jumping" behavior when tabbing through fields close to each other that were at slightly different heights.</p>
  
  <p>I can change how the persistent header is done, so long as it doesn't require too much effort. Unfortunately, frames are out of the question because we need to interact with the page content from the persistent header.</p>
  
  <p>Ideally the solution would be in CSS, but I'm open to JavaScript if it solves my problem.</p>
  
  <p>Another note, we require that the input elements have a background color, which means that adding padding to them would make the background color stretch, which hides parts of the background image. BUT, the input elements are in a div, so we might be able to use this to our advantage.</p>