0

2列のWebページがあります。first（id = "＃list"）はdivのリストであり、コンテンツによって長くなる可能性があります。2番目（id = "＃expand"）は、左側の列でdivがクリックされたときの展開ビューです。右側に新しい列がある、Twitterのようなレイアウトを想像してみてください。

ユーザーは下にスクロールし続けると、左のdivが表示されます。彼らがそのdivのいずれかをクリックすると、

  1. 表示領域に右（ "#expand"）divを配置するにはどうすればよいですか。？
  2. 下にスクロールすると、「＃expand」は通常どおりに動作するはずです。
  3. 上にスクロールすると、「＃expand」が上に移動するはずです。

誰かが助けることができますか？注：#expandは動的であり、AJAXを介して取り込まれます

ありがとう

4

2 に答える 2

1

固定位置を使用してみてください。これにより、ページ内の同じ場所に配置されます。

#expand{
    position:fixed;
    top:0;
    left:0;
}
于 2012-12-17T15:56:55.383 に答える
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 に答える