title: Creating a floating box which stays within a div
body: <p>I'm trying to create a div 'floater' which acts similar to a fixed div (stuck in a specific position regardless of scrolling), but when it hits the boundaries of the div it is within, it stops being fixed.</p>
  
  <p>When the scrollbar is at the top, it should have the div placed at 0 within the containing div (positioned say 100 pixels from the top) and when the scrollbar reaches the bottom, it should prevent the floater from going outside the container. The height of the floater would be static, but the container height would be dynamic.</p>
  
  <p>I've seen this type of this all over the place, but can't figure out how to find a good example for it.</p>
  
  <p>I'd like to avoid jQuery if possible, as I imagine it should only require some simple JavaScript to determine the current position relative to the div it is within.</p>
  
  <p>Thank you.</p>