1

私が達成しようとしていること：

  • 画像の上部が (スクロールによって) ウィンドウの上部に到達すると、要素にクラス "sticky" が追加されます。
  • スティッキーになった画像がコンテナの一番下に到達すると、クラスが削除され、要素は最後の一番下の位置に留まります
  • ユーザーが上に戻ると、同じプロセスが発生しますが、下から上に移動するだけです。

フィドル。

関連する jQuery :

$(".entry-thumbnail").each(function () {
    var $this = $(this),
        p = $this.parent(),
        scrollT = $this.scrollTop(),
        scrollW = $(window).scrollTop(),
        scrollPT = p.scrollTop() + p.outerHeight();

    if (!$this.hasClass("sticky")) {
        console.log("Tada!");
        $(window).scroll(function () {
            if (scrollT <= scrollW) {
                $this.addClass("sticky");
            }
        });
    }
    else {
       $(window).scroll(function () {
            if (scrollT + $this.outerHeight() >= scrollPT) {
                $this.removeClass("sticky");
            }
        });
    }
});

私が遭遇する問題：

  • クラスはすべての要素に追加されます
  • クラス追加時に要素の位置（左右）が変わる
  • クラスは削除されません
4

1 に答える 1

2

私はあなたの問題に対して別のアプローチを取りました。イベント ハンドラー内で必要な絶対的な高さを計算window.scrollし、スクロールの高さに基づいて適切な記事の高さを設定します。

デモhttp://jsfiddle.net/eh3sT/をチェックして、うまくいくかどうか教えてください。

編集：問題の大部分を自分で修正しました。ありがとう ：）

最適化する必要はあまりないと思いますが、読みやすさを向上させるために少し変更しただけです。http://jsfiddle.net/eh3sT/3/embedded/result/で完全なデモを確認してください。

完全なコード:

var etPos = []
var $articles = $("article");
$articles.each(function () {
    var tPos = $(this).offset();
    etPos.push([tPos.top, tPos.top + $(this).height(), $(this).find('.entry-thumbnail').height()]);
});

$(window).scroll(function () {
    var scrollHeight = $(document).scrollTop();
    var cssProp = {};
    for (var i = 0; i < etPos.length; i++) {
        var $atricle = $articles.eq(i);
        if (scrollHeight >= (etPos[i][0]) && scrollHeight <= (etPos[i][1] - etPos[i][2] - 20)) {
            cssProp.top = scrollHeight - etPos[i][0] + 10;
            cssProp.bottome = "auto";
        } else if (scrollHeight > (etPos[i][1] - etPos[i][2] - 20) && $atricle.height() > ($atricle.find('.entry-thumbnail').height() + 10)) {
            /*
            Remove the second condition if the article height is always > respective thumbnail + 10. we don't want set bottom 10, if the thumbnail has no space to scroll.
            */
             cssProp.top = "auto";
             cssProp.bottom = 10;
        }else {
            cssProp.top = 10;
            cssProp.bottom = "auto";
        }
        $atricle.find('.entry-thumbnail').css(cssProp);
    }
});

注:articleすべての記事タグにクラスを追加しました。

于 2013-11-03T23:12:08.407 に答える