在滾動時將邊欄框鎖定到窗口頂部

我試圖用jQuery創建一個功能塊，您可以在邊欄中設置類（如「密碼箱」），並鎖定到頂部當你滾過他們的窗口。在滾動時將邊欄框鎖定到窗口頂部

但是我想在側邊欄中實現兩個不同的框，當你滾過它們時，它們將互相推開。我可以使用的最佳對比是iPhone通訊錄應用程序，每個字母A-Z如何在頂部鎖定一個標題欄。但是當你滾動過去這條被推出對B標題欄填寫下面是我在說什麼抓屏：

contacts app screenshot

什麼是創造一些最好的技術這樣的功能？我熟悉jQuery，但我從來沒有使用.offset（）這樣的屬性，所以即使是第一步來構建這個接口，我仍然掙扎着。

提前感謝您的幫助！

來源

2012-09-17 Jake

我已經創建了一個工作小提琴。 Link。

HTML：

<html> 
<head></head> 
<body> 
    <div id="outer_div"> 
    <div class="lockdiv">Div A</div> 
    <div class="lockdivcontent"> 
     <div class="regular">Text A 1</div> 
     <div class="regular">Text A 2</div> 
     <div class="regular">Text A 3</div> 
     <div class="regular">Text A 4</div> 
    </div> 
    <div class="lockdiv">Div B</div> 
    <div class="lockdivcontent"> 
     <div class="regular">Text B 1</div> 
     <div class="regular">Text B 2</div> 
     <div class="regular">Text B 3</div> 
     <div class="regular">Text B 4</div> 
    </div> 
    <div class="lockdiv">Div C</div> 
    <div class="lockdivcontent"> 
     <div class="regular">Text C 1</div> 
     <div class="regular">Text C 2</div> 
     <div class="regular">Text C 3</div> 
     <div class="regular">Text C 4</div> 
    </div> 
    <div class="lockdiv">Div D</div> 
    <div class="lockdivcontent"> 
     <div class="regular">Text D 1</div> 
     <div class="regular">Text D 2</div> 
     <div class="regular">Text D 3</div> 
     <div class="regular">Text D 4</div> 
    </div> 
    <div class="lockdiv">Div E</div> 
    <div class="lockdivcontent"> 
     <div class="regular">Text E 1</div> 
     <div class="regular">Text E 2</div> 
     <div class="regular">Text E 3</div> 
     <div class="regular">Text E 4</div> 
    </div> 
    <div class="lockdiv">Div F</div> 
    <div class="lockdivcontent"> 
     <div class="regular">Text F 1</div> 
     <div class="regular">Text F 2</div> 
     <div class="regular">Text F 3</div> 
     <div class="regular">Text F 4</div> 
    </div> 
    <div> 
</body> 
</html>

的Javascript：

$(document).ready(function() { 

    $('#outer_div').scroll(function(){ 

     $('.lockdivcontent').each(function(){ 
      var top = $(this).offset().top; 
      var lockdiv = $(this).prev(); 
      if(top<lockdiv.height() && top>-1*($(this).height())) { 
       lockdiv.offset({top:1}); 
      } else { 
       lockdiv.offset({top:top-lockdiv.height()-1}); 
      } 
     }); 

    });    
});

CSS：

#outer_div { 
    width: 90%; 
    height: 300px; 
    overflow-y: auto; 
    overflow-x: hidden; 
    border: 1px solid lightgray; 
    padding: 0 10px; 
} 

.lockdiv { 
    width: 100%; 
    background-color: lightgray; 
    border: 1px solid; 
    height: 20px; 
} 

.regular { 
    width: 100%; 
    background-color: #FAFAFA; 
    height: 20px; 
}

看看是否有幫助！

來源

2012-09-17 21:51:56

哦哇這看起來真的很好！今天晚些時候我將不得不仔細查看你的代碼，但是我也想把頂端的div向上推，而不是重疊它。我相信這是可能的一些調整的JS，但你的解決方案是美妙的 – Jake

很高興，它適合你！ –

在滾動時將邊欄框鎖定到窗口頂部

回答

相關問題