jStickyScroll
Description
This plug-in allows you to keep a div element at the top of the browser window when scrolling down a page. The most common use is to keep a sidebar navigation menu from disappearing when scrolling to the bottom of a web page.
How To Use This Plug-in
- - Give the div an id attribute
- - Edit the jStickyScroll.css file to format your div
- - Follow directions in jStickyScroll.js to edit the JavaScript file for your div's needs
-
- Include the jStickyScroll.css file between the
<head></head>tags of your page<link rel="stylesheet" type="text/css" href="jStickyScroll.css"> -
- Include the jStickyScroll.js file between the
<head></head>tags of your page<script type="text/javascript" src="jStickyScroll.js">
Plug-in Code
jStickyScroll.css
/*Change '#your_div_id_here' to the ID attribute of your DIV
/*Change 'top' to your header height, if no header change to 0 */
/*If you want the DIV on the right side of the page, change 'left:0' to 'right:0' */
/* Change 'width' to whatever size you want your DIV to be */
#your_div_id_here {
position: absolute;
left: 0;
top: 175px;
width: 200px;
padding: 0;
}jStickyScroll.js
// Editing Instructions
// 1. Change '#your_div_id' to whatever the ID attribute of your DIV is
// 2. Change '175' to whatever the height of your header is, if you have no header, set to 0
/********************************
* (C) 2009 - Thiago Barbedo *
* - tbarbedo@gmail.com *
*********************************/
window.onscroll = function()
{
if( window.XMLHttpRequest ) {
if (document.documentElement.scrollTop > 175 || self.pageYOffset > 175) {
$('#your_div_id').css('position','fixed');
$('#your_div_id').css('top','0');
} else if (document.documentElement.scrollTop < 175 || self.pageYOffset < 175) {
$('#your_div_id').css('position','absolute');
$('#your_div_id').css('top','175px');
}
}
}