javascript - 粘性/固定滚动直到父容器结束 - CSS/JS

Question

我正在尝试让这样的东西工作 - https://www.acnestudios.com/nl/en/avalon-double/12F163-1G2.html?categid=woman-coats-jackets .

想法是让产品描述具有粘性，直到图像/图像的末尾滚动，然后停留在容器底部，直到再次向上滚动，然后再次变得粘性。

position: sticky; 会很好，如果它被浏览器支持，但它不是:(

找到附上的jsfiddle:https://jsfiddle.net/pn7Lzgs1/

我猜它会是某种滚动addEventListener

谢谢!

Answer 1

只需将以下代码添加到您的脚本中即可。

$( document ).scroll(function() {
    var scroll = $(window).scrollTop();
    if(scroll > 100){
        $("body").addClass("scroll1");
    }
});

您现在可以在 css 中添加以下样式。

body.scroll1 .yourElement{
    position:fixed;
}