Question

我有一个双栏目网页。第一个（id =“＃list”）是一个div列表，它可以随着内容变得更长。当在左列上单击div时，第二个（id =“#extens”）是展开视图。想象一下twitter就像布局一样，右侧有一个新栏目。

用户继续向下滚动以查看左侧div。当他们点击任何一个div时，

如何在查看区域中放置右侧（“#expand”）div。？
如果它们向下滚动，“＃expand”应该表现正常，因为它应该是它的位置。
如果它们向上滚动，“＃expand”应该向上移动，直到击中顶部。

有人可以帮忙吗？注意：#expand是DYNAMIC，通过AJAX引入

谢谢

Answer 1

尝试使用固定定位，将其保持在页面中的相同位置：

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

Answer 2

当用户滚动浏览#expand元素的“顶部”时，您希望在position: fixed, top: 0和position: absolute, top: <the current scroll position>之间切换。下面的代码使用（不完全）全局变量来跟踪此切换应发生的位置。如果您愿意，可以使用$("#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

Jquery定位动态div scrolltop

2 个答案: