How to make an element fake position:fixed so it acts fixed until a certain scroll height, then attaches?

Question

A number of websites have a feature, where an element appears fixed on the page as you scroll UNTIL you hit a certain point, like the end of a side bar, and then it anchors to the bottom of that sidebar. Once you scroll back up, it begins to act like a fixed element, remaining on your screen as you scroll.

What do you call this and how is it done?

Answer 1

You can set position to absolute and attached scroll event to the page and in that event you change top css value based on position of scrollbar (in jQuery it's scrollTop in pure javascript it should be similar), and then you add condition that top is changed only if scrollTop is less then specific value like offset.top + height of the sidebar.