当元素到达页面顶部时添加类并在元素到达父元素底部时删除类

Question

我想要达到的目标：

• 当图像顶部到达窗口顶部时（通过滚动），将向元素添加一个“sticky”类
• 当现在具有粘性的图像到达其容器的底部时，该类被移除并且元素停留在最后一个底部位置
• 当用户向上移动时，会发生相同的过程，只是从底部开始，一直到顶部。

Fiddle.

相关的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");
            }
        });
    }
});

我遇到的问题：

• 类被添加到所有元素中
• 添加类时元素位置（左/右）发生变化
• 类没有被删除

Answer 1

我对您的问题采取了不同的方法。我在 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 类。