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:
Add the following HTML code to
recipe-3.html; it creates a long web page that is scrollable and adivelement with some important content that needs to stay within the user's view at all times:<!DOCTYPE html> <html> <head> <title>Chapter 6 :: Recipe 3</title> <link...
