jquery定位動態div scrolltop

我有一個雙列網頁。第一個（id =「＃list」）是一個div列表，它可以通過內容獲得更長的時間。第二個（id =「＃expand」）是一個展開視圖，當在左側列上單擊div時。想象一下像佈局一樣的twitter，在右側有一個新列。jquery定位動態div scrolltop

用戶不斷向下滾動查看左側div。當他們點擊任何一個divs，

我怎樣才能將正確的位置（「#expand」）div放在查看區域。？
如果他們向下滾動，「#expand」應該表現正常，因爲它應該是它的位置。
如果他們向上滾動，「#expand」應該向上移動，直到頂部。

有人可以幫忙嗎？注：#expand是動態的，通過AJAX帶來

感謝

來源

2012-12-17 aVC

你有一個可以演示的要求有關係嗎？ – malkassem

我試過 var position = $（'＃expand'）[0] .scrollTop; \t \t \t \t \t \t如果（位置<200） \t \t \t { \t \t \t $（ '＃擴大'）動畫（{scrollTop的：200}， '慢'）; \t \t \t} 我學習jQuery的，如果對不起我完全關閉。 – aVC

@malkassem我在我的本地機器上工作。我會盡快提出一個演示頁面 – aVC

你想position: fixed, top: 0之間切換和position: absolute, top: <the current scroll position>，因爲用戶滾動經過#expand元素的「頂部」。下面的代碼使用一個（不太）全局變量來跟蹤這個開關應該發生的位置。如果你願意，你可以使用$("#expand").data(...)或其他東西，但你明白了。

(function() { 
var expandY = 0; 
$("a[name=somelink]").click(function (e) { 
    e.preventDefault(); // Keep from following link. 
    expandY = $(window).scrollTop(); 
    $("#expand").css({position: "fixed", top: 0}); 
}); 

$(window).scroll(function() { 
    var $expand = $("#expand"); 
    if($expand.css("position") === "fixed") { 
     if($(window).scrollTop() > expandY) { 
      $expand.css({position: "absolute", top: expandY}); 
     } 
    } 
    else { 
     if($(window).scrollTop() < expandY) { 
      $expand.css({position: "fixed", top: 0}); 
     } 
    } 
}); 

})();

這裏的小提琴：

http://jsfiddle.net/rkp5x/3

來源

2012-12-17 16:27:41 Grinn

YES YES !!!!!有想法。我想我可以用這個來管理。非常感謝！ – aVC

你非常歡迎。感謝您的投票。 – Grinn

嘗試使用固定定位，將它保持在同一個地方的頁面：

#expand{ 
    position:fixed; 
    top:0; 
    left:0; 
}

來源

2012-12-17 15:56:55

但是，如果#expand比窗口大，那麼它將不會滾動，如果我使用固定的。對？ – aVC

@aVC爲它添加一個'overflow：auto' ;-) – yckart

jquery定位動態div scrolltop

回答

相關問題