title: Multiple Sticky Headers - CSS / JavaScript / AngularJS
body: <p>I tried to find some solution for the following scenario:</p>
  
  <ol>
  <li>Header height is all different </li>
  <li>Mouse scroll down</li>
  <li>Fixed headers</li>
  </ol>
  
  <p>Does anyone know how to make multiple sticky headers like this?</p>
  
  <p>(1) init</p>
  
  <p><img src="https://i.stack.imgur.com/RN90x.png" alt="enter image description here"></p>
  
  <p>(2) scroll down (using mouse)</p>
  
  <p><img src="https://i.stack.imgur.com/fEtdI.png" alt="enter image description here"></p>
  
  <p>(3) scroll down (using mouse)</p>
  
  <p><img src="https://i.stack.imgur.com/5XcQ2.png" alt="enter image description here"></p>