How can I make multiple on scroll fixed headers/navbars that stick at the very top of the page?

Question

Does anyone know how to make multiple on scroll fixed headers? I\'ve checked answers such as this.

It\'s kind of what I want, but I want that header to stop before a

Answer 1

Demo:

http://jsfiddle.net/4tmcLjq3/3/

Explanation:

position: sticky with correct markup will do the work

PS: I know there is already an answer using position: sticky but in that solution the previous header doesn't stop but overlaps with the next one. In my solution is stops before the next sticking.