Sticky Content script v2.0
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.
Step 1: Add the below script to the <HEAD> section of your page:
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:
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> Note that if the " <style>
Note:
Always add the "! |
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
Warning: Only enable the " |
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.