仅在滚动到另一个特定的节/格之后显示“粘帖”至页面顶部

Question

我正在尝试构建一个页面（使用Elementor，如果有关系的话），该页面当前依次具有导航部分，英雄部分和服务部分。我要实现的是，当用户滚动到服务部分时，会出现一个固定在页面顶部的新粘性部分。

我几乎以为提交此文档时，该站点向我展示了其他人发布的潜在解决方案，而我发现了一个！我从5年前就看到了这个，并尝试了一下： Make div stick to top of page after scrolling past another div?

这是我正在使用的代码解决方案，对该链接进行了稍微修改：

CSS：

#sticky-bar {
    display: none;
    z-index: 9999;
}
#sticky-bar.fixed {
    display: block;
    position: fixed;
    top: 0;
    width: 100%;
}

JS：

$(window).scroll(function() {
    var distanceFromTop = $(this).scrollTop();
    if (distanceFromTop >= $('#services').height()) {
        $('#sticky-bar').addClass('fixed');
    } else {
        $('#sticky-bar').removeClass('fixed');
    }
});

这就是问题：该解决方案似乎认为只有一个部分。该实现发生的事情是它正在计算服务部分的高度，一旦我滚动该数量，便会显示粘滞显示，而不管它之前的部分的总高度（在这种情况下，是导航和英雄）。

我真正希望的是粘性部分仅在滚动经过特定服务部分时才出现，该特定服务部分也将包含之前的部分。我不知道是否需要修改上面的代码以某种方式考虑这些部分的合并高度，或者是否有更高效的代码可以写成基本上说“当用户滚动.services时显示.sticky”。并将其固定在页面顶部”