在不使用 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來淡入淡出