固定/滾動Div

Question

我想弄清楚如何設置一些部分標題保持固定，但當用戶到達下一個標題時，然後向上滾動頁面。例如：http://www.codeandtheory.com/about-us。

我的標記：

<div class="section-title"><div class="section-bar"></div> 
<a href="#collections"><p class="section-title">Collections Management</p></a> 
</div> 

我的CSS：

.section-title { 
    width: 270px; 
    font-size: 30px; 
    line-height: 38px; 
    color: #f18a21; 
    text-transform: uppercase; 
    position: fixed; 
    float: left; 
    display: block; 
} 

測試環節：http://api.mtscollective.com

可這在純CSS來完成，或者需要JS？

謝謝！

Answer 1

Js是必需的！

試試這個相同的

jQuery的

<script>  
$(window).scroll(function(){ 
     if ($(this).scrollTop() > 100) { 
      $('.section-title').addClass('fixed'); 
     } else { 
      $('.section-title').removeClass('fixed'); 
     } 
    }); 
</script> 

和CSS：

.fixed {position:fixed; top:0; left:0;}