How does economist.com implement their sticky header? jQuery?

Question

If you go to an article on The Economist website. For example:

http://www.economist.com/node/17629757

When you scroll down the page past a certain point (either with the PAGEDOWN button or by incrementally scrolling with the DOWNARROW key), a red sticky header appears.

Is that jQuery?

How is that implemented?

Answer 1

The content, while added via JavaScript is just position: fixed.

Answer 2

The Economist uses Apture, a service which includes the sticky header and a few other features on the page. (The header has the ID "aptureD", so I started Googling.) If all you want is that exact header, you can just use their service.

Answer 3

You can use the Apture or make a custom sticky header. Look at example.

Answer 4

There are two ways to achieve that: position:fixed and position:absolute. The first one is very basic and you won't be able to get any sliding animation. The second one is what used in your example. Here is a good tutorial with demo and a source.