위치 : JS Fiddle의 끈적한 예

Question

새로운 위치 테스트 : 끈적 거리는 기능이지만 작동하지 않습니다.

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> 

바이올린 http://jsfiddle.net/78kxU/3/

Answer 1

position: sticky를 결정하기 위해 top 또는 bottom CSS 속성 중 하나를 지정해야합니다 어디/때 끈적 요소가해야 붙잡기 시작하십시오. 전달 호환성을 위해 공급 업체 접두사가없는 값을 지정해야합니다 (이 경우 크롬 30.0.1599.101 이상이어야 함).

그래서, 다른 말로하면, 당신의 .slide > ul > li.title 스타일 규칙이 두 줄을 추가 http://jsfiddle.net/46gpu/

:

여기

position: sticky; 
top: 0; 

업데이트 된 바이올린의