列表與滾動

Question

語境

時神奇地附着在上面我有一個div與overflow: auto屬性元素。

在這種div，我有這樣的：

<h3>Category 1</h3> 
<ul> 
    <li>blabla</li> 
    <li>blabla</li> 
    etc... 
</ul> 
<h3>Category 2</h3> 
<ul> 
    <li>blabla</li> 
    <li>blabla</li> 
    etc... 
</ul> 
<h3>Category 3</h3> 
    etc... 

我想，當我滾動，當前類別的附加div的頂部，直到下一個類別。當我到達另一個類別時，它將取代以前的頂部。

難以解釋，所以我做了一個形象：

我敢肯定，我在一個網站上看到這一點，但我不記得了。

問題

• 你知道這個插件或與本網站？
• 你能給我一些曲目來開發它嗎？

Answer 1

的jsfiddle演示 - http://jsfiddle.net/h2p6W/3/

附加一個事件監聽到你的滾動股利和測量頭在div位置。然後選擇一個小的負值，並將其文本顯示到您的標題中。

$('#scroller').scroll(function() { 
    var positions = $('h3', this).map(function() { 
      return { 
       top: $(this).position().top, 
       el: this 
      }; 
     }).get(); 

    //Go backwards through the array and pick the first negative (smallest) value 
    for(var i = positions.length - 1; i >= 0; i--) { 
     if(positions[i].top < 0) { 
      $('#header').text($(positions[i].el).text()); 
      return; 
     } 
    } 
}); 

舉例來說，如果你在你的滾動DIV 5頭，並且位置是：

[-100, -50, -20, 30, 120] - 然後-20是要顯示的標題。

編輯 - 重構的代碼

的jsfiddle演示 - http://jsfiddle.net/h2p6W/4/

$('#scroller').scroll(function() { 
    var category = ''; 

    $($('h3', this).get().reverse()).each(function() { 
     if($(this).position().top < 0) { 
      category = $(this).text(); 
      return false; 
     } 
    }); 

    $('#header').text(category); 
}); 

Answer 2

下面是一些例子，如何：http://www.mustafaozcan.net/en/page/jQuery-Fixed-Table-Header-Plugin.aspx

Answer 3

Twitter的引導有一些相似的特徵：fixed navbar與scrollspy。

Answer 4

您可以將一個eventListener添加到每次用戶滾動窗口時更新的窗口。然後，將標題的頂部位置與當前滾動位置進行比較。如果滾動位置大於標題的位置，請更改標題。否則，或者如果頭部已被調整大小，則不要執行任何操作。

下面是一些示例代碼。隨意根據自己的喜好量身定做。

<div style="position:fixed;right:0px;" id="place">Category 1</div> 

<h3>Category 1</h3> 
<ul> 
    <li>blabla</li> 
    <li>blabla</li> 
    etc... 
</ul> 
<h3>Category 2</h3> 
<ul> 
    <li>blabla</li> 
    <li>blabla</li> 
    etc... 
</ul> 
<h3>Category 3</h3> 
<ul> 
    <li>blabla</li> 
    <li>blabla</li> 
    etc... 
</ul> 


<script> 

var headers = document.getElementsByTagName("h3"); 

var place = document.getElementById("place"); 

addEventListener("scroll", function(e) { 

    var scroll = document.body.scrollTop; 
    var foundHeader = false; 

    for(var i = headers.length-1; i >= 0; i--) { 

     var h = headers[i]; 
     var top = h.offsetTop; 


     if(!foundHeader && scroll+50 > top) { 
      place.innerHTML = h.innerHTML; 
      foundHeader = true; 
     } 




    } 

}, true); 

</script> 

編輯：更改了代碼以執行您正在嘗試執行的操作。