Thursday, 29 August 2013

Position: Sticky example in JS Fiddle

Position: Sticky example in JS Fiddle

I am testing the new position:sticky feature but it does not appear to work.
CSS
.slide {
width:300px;
height:400px;
border:1px solid #888;
border-radius:8px;
position:relative;
overflow:auto;
}
.slide > ul {
padding:0;
margin:0;
position:relative;
}
.slide > ul > li {
min-height:20px;
display:block;
padding:10px;
background:#F8F8F8;
box-shadow:inset 0 0 3px #CCC;
list-style:none;
}
.slide > ul > li.title {
min-height:12px;
background:#888;
colour:#FFF;
font-weight:bold;
position:-webkit-sticky;
}
HTML
<div class="slide">
<ul>
<li class="title">Settings</li>
<li>General</li>
<li>Social</li>
<li>Search Engine</li>
</ul>
<ul>
<li class="title">Privacy</li>
<li>Personal</li>
<li>Business</li>
<li>Enigma</li>
</ul>
<ul>
<li class="title">Settings</li>
<li>General</li>
<li>Social</li>
<li>Search Engine</li>
</ul>
<ul>
<li class="title">Privacy</li>
<li>Personal</li>
<li>Business</li>
<li>Enigma</li>
</ul>
</div>
The Fiddle http://jsfiddle.net/78kxU/3/

No comments:

Post a Comment