在不使用 jquery 的情况下，如何在用户滚动 100px 后显示 div？

Question

我有一个固定在我的网站页脚的 div，它使用 CSS 定位，在页面加载时不可见。 我希望它在用户在页面上向下滚动至少 100px 时显示，并在用户向上滚动时隐藏。 我在 stackoverflow 和其他使用 jquery 的网站上看到了示例，但我正在寻找仅 javascript 的解决方案。

我包含了一个 jquery 版本，它说明了我想要做什么，但我不确定如何仅使用 javascript 来做到这一点。

<style type="text/css">
.footerbar{
  position:fixed;
  width:100%;
  left:0;
  bottom:0;
  background-color:black;
  color:white;
  display:none;
}
</style>

<div id="fixed-footer" class="footerbar">some text and images here</div>

<script type="text/javascript">
 $(function(){
    $(window).scroll(function() {              
        ($(document).scrollTop() + $(window).height()) / $(document).height() > 0.50 ? $('#fixed-footer').fadeIn() : $('#fixed-footer').fadeOut();
    });
})
</script>

Answer 1

window.onscroll = function() {
    scrollFunction();
}

function scrollFunction() {
    if (document.body.scrollTop > 100 || 
        document.documentElement.scrollTop > 100) {
            document.querySelector('#fixed-footer').style.display = "block";
        } else {
            document.querySelector('#fixed-footer').style.display = "none";
        }
}

这里是function...然后使用css来淡入淡出