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

回答

相关问题