Javascript CSS如何在不使用jquery的情况下在滚动后固定元素位置

我想我的网站的侧边栏的一个元素是固定的一些滚动后。我正在搜索的功能与9gag网站在这里使用的功能相同：（特别是当你从某个点向下滚动页面时固定的最后一个正方形广告）。如果不使用jquery或其他外部库，而只使用css/javascript，我如何做到这一点呢？

我已经通过在文档主体滚动顶部的“固定”和“绝对”之间切换完成了

function scrollFunction() {
    var scrollPos = document.body.scrollTop;

    if (scrollPos > 40) {
        document.getElementById("fixed-floater").style.position = "fixed";
        document.getElementById("fixed-floater").style.top = "0px";
    } else {
        document.getElementById("fixed-floater").style.position = "absolute";
        document.getElementById("fixed-floater").style.top = "40px";
    }
}

window.onscroll = scrollFunction;

---

但是你可以考虑看“粘性CSS”

谢谢，这就是我正在寻找的。