滚动显示和显示元素

Question

我想在滚动时显示/显示元素。到目前为止，我没有成功，但我希望你能帮助我。

由于.heigh（）和.scrollTop（）方法，我现在正在使用jQuery，但我宁愿使用普通的JS。

我的代码到目前为止

HTML

<div class="container">
  <div class="filler"></div>
  <div class="filler"></div>
  <div class="filler"></div>
  <div class="filler"></div>
</div>
<div class="toShow"></div>

萨斯

.container
  width: 100%
  height: 100%
  overflow: auto
  border: 3px solid crimson
  box-sizing: border-box

.filler
  width: 100%
  height: 200px
  border: 2px solid green

.toShow
  width: 50%
  height: 100px
  background-color: navy
  display: none
  position: fixed
  top: 0
  left: 0

JS：

(function() {
  $(window).scroll(function() {
      var H = $(".container").scrollTop() / 2
      var contH = $(".container").height()
      if(H > contH ){
            $(".toShow").fadeIn()
            console.log("yes")
      }else{
            $(".toShow").fadeOut()
      }
  })
}.call(this))

和PEN在这里