Creating sticky elements

Sticky elements are page elements that stick to a position within the user's browser, even as they scroll. Sticky elements are used to always keep content within the user's line of sight. This content could be navigation, important information, or even advertising. This recipe will show you how to create sticky elements and also use jQuery to activate them when the user scrolls to a certain point on the page.

Getting ready

Using your favorite editor, create three files named recipe-3.html, recipe-3.css, and recipe-3.js, ensuring that they are in the same directory as your jQuery library.

How to do it…

For each of the newly created files, perform the following steps:

  1. Add the following HTML code to recipe-3.html; it creates a ...

Get jQuery 2.0 Development Cookbook now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.