CSS Codes
CSS Layouts

FF3+ IE7+ Opera8+

Sticky Content script v2.0

Author: Dynamic Drive

July 30th, 15: Rewritten for various improvements

Description: You most likely have seen it on the web somewhere- a menu or header bar that initially appears static on the page like its peers, but as you scroll past it it becomes fixed in position, continuing to remain visible. It's a novel way to keep important parts of your page "sticky". This versatile jQuery script lets you do just that. It supports an optional "clone" mode to tackle inline contents that usually are difficult to make sticky without a jitter in the content during the transition. More on this below.

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

Relatively positioned element with an explicit left property. This usually causes a jitter when made sticky, though using the "clone" option, it doesn't.

Directions: Developer's View

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

Select All

It references the following files, 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({optional_settings })
})

Where "selector" is the jQuery selector that references the element(s) you wish to make sticky, and optional_settings 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({})
})

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

setting/ option Description
stickyclass: 'string'

Defaults to 'sticky'

 Adds the specified CSS class to the target element whenever its top edge is scrolled past (becomes partially hidden), and removes the class when the element is fully visible by itself. With that said, to actually make the element sticky then, in your CSS, target the element when the sticky class is present and set its position to "fixed" at the very least, for example:

<style>

#samplemenu.sticky{
 position: fixed !important;
 top: 0 !important;
}

</style>

Note that if the "clone" option below is set to true, you should target the clone element instead in your CSS, which carries an ID of "elementid-clone":

<style>

#samplemenu-clone.sticky{
 position: fixed !important; /*not needed when styling cloned element */
 top: 0 !important;
}

</style>

Note: Always add the "!important" suffix to every style defined inside your "sticky" class to make sure it supersedes any duplicate styles found in the element in its default state.
clone: Boolean

Defaults to false

 If set to true clones the target element and fix positions the cloned element instead to give the appearance of the target element appearing fixed. In reality the target element is simply hidden. The cloned element will have an ID of "elementid-clone".

Set this option to true if the target element jitters briefly when transitioning to "fixed" as the user scrolls the page. With a clone value of true, the element when made sticky will not jitter - quickly bopping up and down- as it would otherwise.

Warning: Only enable the "clone" option when required, as it's more resource intensive to run.

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({clone:true})
})

More about the "clone" option for "sticking" inline elements

The "clone" option of the stickyit() method is a powerful way to take the hassle out of sticking content on your page that appears inline on the page, surrounded by other content (ie: a relatively positioned DIV inside a paragraph). Normally when such content is made sticky by adding "position:fixed" to it, a brief jitter occurs as it transitions into the new position, as content surrounding it is reflowed and contents' heights change (hence the bopping up and down). If you notice such a behavior, enable the "clone" option when calling stickyit() on the target element to remedy the issue. Examples of troublesome content to stick that could benefit from the clone option are:

  • Static content nestled inside other content such as an image inside a paragraph of text.
  • A relatively positioned DIV with a "left" property that shifts it horizontally from its default position.

For  absolutely positioned elements, this option never needs to be enabled, as sticking such elements do not disrupt the flow of content surrounding it.

When the "clone" option is enabled, it duplicates the target element you wish to stick and adds "posititon:fixed" to that element instead. The original content is merely hidden when this happens without taking it out of the regular flow of the page. Whenever you enable the "clone" option to sticky a content, your CSS should target the cloned element instead to style it when it's sticky, which carries an ID of "originalelementID-clone". Here's an example:

<style>
#headercontent-clone{
 position: fixed !important; /*not needed when styling cloned element */
 top: 5px !important;
}
</style>

<script>
jQuery(function($){ //on DOM load
 $('#inlineimage').stickyit({clone:true}) // set "clone" option to true
})
</script>

<img id="inlineimage" />The image to the left of this text will be made sticky.

Only enable the "clone" option on the target element if necessary, as it requires more resources to run than the normal mode.

Wordpress Users: Step by Step instructions to add ANY Dynamic Drive script to an entire Wordpress theme or individual Post