Sticky top header when scrolling down

How can I display a fixed top header once the user scrolls down the page and then disappear when the page is scrolled to the top again? Example of this -


There’s not a built-in way, but with a little bit of code I’ve seen this is possible. I’d recommend searching “sticky” on the forums (there’s a bit to get through as users figured out methods to do this).