javascript-停止固定元素在特定点后滚动而不使用jquery

我知道有很多解决方案可以使用jquery阻止元素在某个点之后滚动,但是我想使用普通的javascript。

基本上,这是一个元素,一旦你向下滚动到它,我希望它停止被固定在页面底部,这样它就不会在页脚下,如果这有意义的话。

这是我当前的javascript:

var fixmeTop = $('#childWidth').offset().top; //get initial position

$(window).scroll(function() {
var currentScroll = $(window).scrollTop(); // get current position

if (currentScroll >= fixmeTop - 100) {           // fix once scroll to or past element 

        var elementAdd = document.getElementById("childWidth");
        elementAdd.classList.add("afix");

} else {  
    var elementRemove = document.getElementById("childWidth");
    elementRemove.classList.remove("afix");  
}
});

修复元素的css:

.afix {
    position:fixed;
    z-index;9999;
    top:100px;
}

我试着从页面底部获取childwidth的距离,然后添加一个css类 position:absolute; 曾经在距页面底部一定距离内滚动,但当我向下滚动到接近底部时,元素就消失了。