Question

这有点复杂，请参阅此页面以获取示例：No Nay Never post page

当您向下滚动页面时，左侧的图像（实际上是整个左侧div）会粘在页面顶部。

我希望停止修复，并在图片到达底部的“评论”部分时再次滚动。

我无法理解如何做到这一点 - 任何帮助都会受到大力赞赏。

Answer 1

当您开始滚动时，在达到某个fixed后制作图像scrollTop，我会假设？

当达到更大的absolute时，您需要知道的是为元素提供scrollTop位置。有问题的绝对位置应该来自评论部分的顶部偏移和粘性图像的高度。

Answer 2

您可以使用滚动功能实现此目的，每次用户滚动时都会检查页面位置

$(window).scroll(function() {
    //event will fire each time a user scrolls
    //get the top page position
    var screenTop = $(document).scrollTop();

    //Evaluate the position, do what you want
});

Answer 3

示例中的网站使用scrollTop。在一些滚动点，有一个类“粘性”添加到div（#left）与javascript函数：

function fixDiv() {
    var $div = $("#left");
    if ($(window).scrollTop() > $div.data("top")) { 
        $div.addClass("sticky"); 
    }
    else {
        $div.removeClass("sticky");
    }
}

在这个小片段中读取给定的位置数据（“top”）

$("#left").data("top", $("#left").offset().top); // set original position on load
$(window).scroll(fixDiv);

评论不言而喻。读取原始位置

这是“粘性”类：

.sticky {
    position: fixed !important;
    top: 0 !important;
}

允许固定的div再次滚动

3 个答案: