Question

I’m trying to copy the functionality on this page: http://www.jetstar.com/sg/en/special-offers. Specifically, the behavior of the “Book flights” menu where it sits at a specific location on page load but then sticks to the top of the page as the user scrolls down.

As of now, I have no idea if I should be looking for Javascript or CSS or what, so any pointers on what the general methodology might be would be very helpful.

I know this is a very poor question, but unfortunately I simply don’t know what I don’t know and have no idea how to provide further details. I’m just looking for a pointer in the right direction.

Answer 1

The usual approach is something like this: bind to handler to the window’s scroll event;
check scrollTop in the handler and, when it reaches a certain limit, switch the statically positioned element to position:fixed. Then do the reverse when the user is scrolling back up the page.