So how does it work?
Pretty simple, I am using a container here to simply simulate a page. I always make sure to apply my CSS to classes not id’s even if that means I have a class and an id that’s how it should be done. Its a best practice to never apply CSS to id’s.
Most of the CSS is really just for the mockup, I had added a bunch of padding at the bottom of the container so you can scroll and test it.
As you can see when you scroll down, once the div hits the top of the window, it becomes fixed. as you scroll back up the div will go back to its previous Static positioning.
I hope this helps with your project, let me know in the comments down below.