將位置更改爲固定時，防止div滾動返回頂部

Question

我有一個包含照片名稱列表的div。單擊名稱時，會顯示另一個div（第一個之外），並在其下面顯示照片和註釋。當第二個div滾動時（使用主窗口滾動條），我不想讓第一個div滾動，它應該保持在原來的位置。所以，只要我打開照片div，我將第一個div的位置從絕對更改爲固定。到目前爲止，這很好，這工作正常。

但是，在打開照片之前第一個div已經滾動時，將該div設置爲固定，導致它跳回頂端，同時我希望它保持在原來的位置。有沒有辦法做到這一點？它爲什麼跳到頂端？

基本上我想達到與在Facebook上顯示照片一樣的效果。當照片區域可以滾動時，背景被凍結。

謝謝！

Answer 1

固定的div跳轉到頂部，因爲沒有頂/底值基本上意味着他們位於0

現在，爲了防止這種情況，你將不得不設置當前位置（前position改爲fixed）關於窗口（這是關鍵部分）。

從查看我的jsfiddle

jQuery的部分：位置被固定

$('#click').click(function() { 
    var ftop = $('#fixer').offset().top - $(window).scrollTop(); 
    var fleft = $('#fixer').offset().left; 
    $('#fixer').css({position: 'fixed', left: fleft + 'px', top: ftop + 'px'}); 
}); 

之前，當前頂座標[offset().top - (window).scrollTop]被計算並然後傳遞到#fixer的top值。 $(window).scrollTop()非常重要，因爲它確保#fixer將始終處於固定的視角。