0

我有一个两栏网页。first(id="#list") 是一个 div 列表，它可以随着内容变得更长。第二个(id="#expand") 是展开视图，当单击左列上的 div 时。想象一下类似 twitter 的布局，右侧有一个新列。

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

  1. 如何在查看区域中定位正确的（“#expand”）div。?
  2. 如果他们向下滚动，“#expand”应该表现正常，因为它应该是它所在的位置。
  3. 如果他们向上滚动，“#expand”应该向上移动，直到到达顶部。

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

谢谢

4

2 回答 2

1

当用户滚动到 #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

于 2012-12-17T16:27:41.473 回答
1

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

#expand{
    position:fixed;
    top:0;
    left:0;
}
于 2012-12-17T15:56:55.383 回答