Vanilla JS Sticky Divs？

Question

我正在尝试创建一个脚本，当页面滚动时，无论div在屏幕上的位置如何，都会将div固定在其位置...基本上，如果div距离顶部50 px，它将保持不变从当前窗口顶部50 px。如果div从顶部开始是0 px，它将从顶部保持0 px。

我不想要一个固定的div，因为它们有截止的问题...所以请不要建议将位置改为'position：fixed;'...

我正在使用的脚本基本上是在执行以下操作：

window.onscroll = function() {

    var elements = document.getElementsByClassName('sticky_div');
    var doc = document.documentElement;

    for (i = 0; i < elements.length; i++) {
        rect = elements[i].getBoundingClientRect();

        if (doc.scrollTop > rect.top) {
            elements.style.top = doc.scrollTop + rect.top;
        } else {
            elements.style.top - doc.scrollTop - rect.top;
        }
    }
}

如果实际上出错了，我很抱歉。我不小心删除了我的原始代码......无论哪种方式，上面的方法导致太迟，它会跳转标题和div。有没有其他方法可以使用较少的过顶处理来做到这一点？

elements.style.top = doc.scrollTop;效果很好，但它不允许位于页面其他位置的div ...

这是一个JSFiddle，因为我不想使用固定的div（尝试水平滚动）： https://jsfiddle.net/o27L3uss/