Home Other Sticky Content script Developer's View
<html>
<head>
<link rel="stylesheet" href="demoindentmenu.css"></link>
<style>
/* Make #samplemenu and #relativepos elements actually stick by targeting their
"sticky" class */
#samplemenu.sticky{ /* give all styles an !important suffix */
position: fixed !important;
top: 0 !important;
box-shadow: 0 0 15px rgba(0,0,0,.7) !important;
}
#relativepos-clone.sticky{
position: fixed !important;
top: 0 !important;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="stickycontent.js">
/***********************************************
* Sticky Content script (c) Dynamic Drive (www.dynamicdrive.com)
* Please keep this notice intact
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/
</script>
<script>
//initialize sticky content:
jQuery(document).ready(function($){ // on DOM load
$('#samplemenu').stickyit({})
$('#relativepos').stickyit({clone:true})
})
</script>
</head>
<body>
<div id="samplemenu" class="indentmenu">
<ul>
<li><a href="http://www.dynamicdrive.com/">Home</a></li>
<li><a href="http://www.dynamicdrive.com/style/">CSS</a></li>
<li><a href="http://www.dynamicdrive.com/forums/">Forums</a></li>
<li><a href="http://tools.dynamicdrive.com">Webmaster Tools</a></li>
<li><a href="http://www.javascriptkit.com/">JavaScript</a></li>
<li><a href="http://www.cssdrive.com">Gallery</a></li>
</ul>
</div>
<br /><br /><br /><br /><br />
<div id="relativepos"
style="width:200px;height:300px;background:navy;position:relative;left:400px;
padding:10px;color:white">
Relatively positioned element with an explicit left property. This usually
causes a jitter when made sticky, though using the "clone" option, it doesn't.
</div>
<p>Some text</p><p>Some text</p><p>Some text</p>
<p>Some text</p><p>Some text</p><p>Some text</p>
<p>Some text</p><p>Some text</p><p>Some text</p>
<p>Some text</p><p>Some text</p><p>Some text</p>
<p>Some text</p><p>Some text</p><p>Some text</p>
<p>Some text</p><p>Some text</p><p>Some text</p>
<p>Some text</p><p>Some text</p><p>Some text</p>
<p>Some text</p><p>Some text</p><p>Some text</p>
</body>
</html>