title: Using window.onscroll event to detect page/frame scrolling
body: <p>I want to postion a <code>DIV</code> inside a page such that it is visible to the user even if the user vertically scrolls the page. </p>
  
  <p>The page has a heading at the top of the page which is <code>75 px</code> tall. Now when the user is at the top of the page and has not scrolled vertically, the <code>DIV</code> must be postioned below the heading. However, once the user scrolls the page causing the heading to go out of sight, the same <code>DIV</code> must now be position at the top of the page (i.e. near the top edge of the browser viewport)</p>
  
  <p>My big concern is the support for <code>window.onscroll</code> event on browsers. I checked QuirksMode for compatibility (<a href="http://www.quirksmode.org/dom/events/scroll.html" rel="nofollow noreferrer">http://www.quirksmode.org/dom/events/scroll.html</a>). It seems to have decent compatibility on IE and Firefox. However the Safari and Chrome support seems a bit quirky. And both these browsers are part of my target browsers' list.</p>
  
  <p>Can anybody tell me if the <code>window.onscroll</code> event is an effective way of detecting page/frame scrolls? Any other suggestions?</p>
  
  <p>P.S. I have considered using the CSS <code>position: fixed</code> rule. It is close to the solution but the <code>DIV</code> is just stuck to one position and I cannot have it adaptively move based on the visiblity of the heading.</p>
  
  <p>Thanks!</p>