javascript - 允许固定的 div 再次滚动

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。在某个滚动点，使用 javascript 函数向 div (#left) 添加了一个“sticky”类：

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;
}