Q:

How to get an element to scroll with the page... for only part of the page?

So I have been trying to get an element to scroll with the page, similar to position: fixed;. However unlike just fixed position I don't want it fixed to the page forever, once it reaches the bottom of its parent it stops there, even if the user continues scrolling down.
So far I have only looked for solutions to this problem in CSS as this is all I really know at this time. If there is a way please help with a good detailed explanation as to how and why it works. 
Thanks for the help 

A:

position: sticky does exactly what you want. But it is not widely implemented yet... 

Only safari has full support with the -webkit prefix. 
Chrome supports it on <th>, but not on <thead> or <tr> elements. 
Firefox doesn't support table elements at all.
No support on IE or current Edge, but supposed to be supported in Edge 16

Here's how it would work:
Note: you must specify one of top|left|right|bottom (can be 0), otherwise it is interpreted as position: relative.
thead { 
  position: sticky; /* -webkit-sticky for Safari */
  top: 10px;
  background: white; 
}

JSFiddle example with a table header that works on Chrome and Safari
There are polyfills too, the most current I know of if Stickyfill. Unfortunately it doesn't work on Firefox tables either…

