Position: Sticky example in JS Fiddle - webkit

Question

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/

Answer 1

position: sticky requires you to specify either a top or bottom CSS property in order to determine where/when the sticky element should begin sticking. You should also specify the un-vendor-prefixed value for forwards-compatibility (in this case, it seems to be required, at least on Chrome 30.0.1599.101).
So, in other words, add these two lines to your .slide > ul > li.title style rules:
position: sticky;
top: 0;
Here's the updated fiddle: http://jsfiddle.net/46gpu/