How to copy this semi-static menu?

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 lo开发者_开发问答oking for a pointer in the right direction.

In cases like this you can use "Developer Tools" in Chrome (or similar tools in other browsers), for example to find how to work stuff, that you interested in.

For example in this case:

• right button on menu item => menu is container (div) with class .menu
• click on element and show css: margin-left: 0px; top: 0px; position: fixed; left: auto; in "sticky" state and margin-left: 0px; top: 76px; left: auto; position: absolute; in not "sticky"

• check out scripts at page and search for right functions (for example, search by "menu" or better "fixed") => in "scroller.js" you can see function, that handles scroll event and:

   if (winTop > 213) {
       //Function call goes here
       $("#nav .menu:first").css({ position: 'fixed', top: '0px', left: 'auto' });
       $(".mateMail").css({ position: 'fixed', top: '248px', left: 'auto' });
  }
  

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.