Dynamic Drive DHTML Scripts- Sticky Content script

New Revised CSS Library Forums Web Tools

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:

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

Select All
<style> /* CSS for sample sticky content */ .mattblacktabs{ overflow: hidden; width:450px; background:#414141; } .mattblacktabs ul{ margin: 0; padding: 0; font: bold 12px Verdana; list-style-type: none; } .mattblacktabs li{ display: inline; margin: 0; } .mattblacktabs li a{ float: left; display: block; text-decoration: none; margin: 0; padding: 7px 8px; /*padding inside each tab*/ border-right: 1px solid white; /*right divider between tabs*/ color: white; background: #414141; /*background of tabs (default state)*/ } .mattblacktabs li a:visited{ color: white; } .mattblacktabs li a:hover, .mattblacktabs li.selected a{ background: black; /*background of tabs for hover state, plus tab with "selected" class assigned to its LI */ } /* Sample CSS class applied to sticky element */ .docked{ -webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/ -moz-transition-duration: 0.5s; /*Mozilla duration version*/ -o-transition-duration: 0.5s; /*Opera duration version*/ -webkit-box-shadow:0px 0px 30px gray; /*Safari shadow version*/ -moz-box-shadow:0px 0px 30px gray; /*Mozilla shadow version*/ box-shadow:0px 0px 30px gray; /*CSS3 shadow version*/ } </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <script src="stickycontent.js"> /*********************************************** * Sticky Content script (c) Dynamic Drive (www.dynamicdrive.com) * This notice MUST stay intact for legal use * Visit http://www.dynamicdrive.com/ for this script and 100s more. ***********************************************/ </script> <script> //initialize sticky content: jQuery(document).ready(function($){ $('#samplemenu').stickyit({ gap: 5, stickyclass: "docked" }) }) </script>

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:

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!
})
})