New Revised CSS Library Forums Web Tools
FAQs Awards Usage Terms Contact
Categories
Other Sections
Sweet Ads
Compatibility
Bookmark online:


FF3+ IE7+ Opera8+

Sticky Content script

Author: Dynamic Drive

Description: You most likely have seen it on the web somewhere- a menu or header bar that initially appears inline on the page like its peers, but as you scroll past it it continues to remain visible and fixed on the page. It's a novel way to keep important parts of your page "sticky". This simple jQuery script lets you do just that. It works by "fixing" a cloned copy of the desired element on the page while the former is out of view, and hiding the copy when the original is back in the limelight. Specify if the content should stop being "sticky" after x seconds, and also, whether to apply a CSS class to it while it is.

Demo: Scroll the page and observe how the purple menu bar above stays fixed when it starts to get out of view.


Directions: Developer's View

Step 1: Add the below script to the <HEAD> section of your page:

Select All

It references the file stickycontent.js, which you should download now.

Step 2: Add the below sample sticky content markup to the BODY section of your page:

Select All

More Information

Sticky Content script is packaged as a normal jQuery plugin. To make a content sticky on the page, simply call the following initialization code in the HEAD section of your page:

jQuery(function($){ //on DOM load

 $(selector).stickyit({
  //setting
 })
})

Where "selector" is the jQuery selector that references the element(s) you wish to make sticky, and setting is an object containing settings for this instance of Sticky Content. So for example, to make a DIV with ID "headercontent" sticky on the page, you would use the following initialization code:

jQuery(function($){ //on DOM load

 $('#headercontent').stickyit({
  stopstickyafter: 10000, //unstick content after 10 seconds
  gap: 5 //add 5 pixel top gap to sticky content
 })
})

The following shows all the available settings for the stickyit() method:

setting/ option Description
stopstickyafter

Defaults to 0 (milliseconds)

Sets the time (in milliseconds) the specified content should remain "sticky" on the page. A value of 0 means perpetually.
gap

Defaults to 0 (pixels)

Sets the top gap between the sticky element and the browser's edge while the element is sticky. Enter an integer (pixel unit assumed).
stickyclass

Defaults to undefined

Adds the specified CSS class to the cloned sticky content while it's visible. This is useful for easily applying additional style to the sticky content, such as add a nice CSS3 box shadow to it.
throttle

Defaults to 30 (milliseconds)

A performance setting, throttle sets how often the script should "check" on the sticky content to decide whether it should stick or unstick the content based on whether the user has scrolled past the content or not. Specifically, it sets the pause (in milliseconds) between checking in- the higher the value, the lower the resource usage on the browser, but inversely, the greater the "stutter" on updating the content's position. The minimum valid value is 0.

When defining these settings, be sure to separate each one with a comma, with NO comma following the very last setting:

jQuery(function($){ //on DOM load

 $('#headercontent').stickyit({
  stopstickyafter: 10000, //<--comma after each setting
  stickyclass: 'docked',
  gap: 5 //<-- Except after last (or if it's the only setting), which should have NO comma!
 })
})