如何制作容器 位置：粘性；直到在视口中达到滚动量

如何解决如何制作容器 位置：粘性；直到在视口中达到滚动量

我正在尝试使用 Elementor 构建器在 wordpress 中重新创建 this effect，其中该部分保持不变/粘性，直到用户滚动多次/所有滚动效果都完成。关于如何最好地实现这一目标的任何建议？或者如果有一个插件可以做到这一点？

从检查中，我只能看到容器设置为“位置：粘性；”但这在 wordpress 中对我不起作用。

如果我遗漏了哪些额外的步骤，我还需要采取哪些措施？谢谢！

解决方法

你试过 $(window).scroll() 函数吗？

JS：

jQuery(function($) {
        $(document).ready(function() {
            var div_top = $('.sticky-bar').offset().top; //define your sticky div
                $(window).scroll(function() {
                    var window_top = $(window).scrollTop() + 61;

                    if (window_top > div_top) {
                        if (!$('.sticky-bar').is('.sticky')) {
                            $('.sticky-bar').addClass('sticky');
                        }
                    } else {
                        $('.sticky-bar').removeClass('sticky');
                    }
                });
        });
});

CSS：

/* sticky state */
.sticky-bar.sticky {
  position: sticky;
}
/* normal state */
.sticky-bar {
  position: relative;
}