New Revised CSS Library Forums Web Tools
FAQs Awards Usage Terms Contact



/* CSS for sample sticky content */

overflow: hidden;

.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 */

-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*/


<script type="text/javascript" src=""></script>

<script src="stickycontent.js">

* Sticky Content script (c) Dynamic Drive (
* This notice MUST stay intact for legal use
* Visit for this script and 100s more.



//initialize sticky content:


gap: 5,
stickyclass: "docked"





<p>The following sample content becomes sticky when you try and scroll past it.</p>

<div id="samplemenu" class="mattblacktabs">
<li><a href="">Home</a></li>
<li><a href="">DHTML</a></li>
<li><a href="">CSS</a></li>
<li><a href="">Forums</a></li>
<li><a href="">Gif Optimizer</a></li>
<li><a href="">JavaScript</a></li>

<div style="height:1000px"></div></body>