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 回答