仅在视口（JS）上可见时显示元素

Question

我有这样的东西

<div class="block">
  <div></div>
</div>

<div class="block">
  <div id="div_ourstory"></div>
</div>


<div class="block">
  <div id="div_land2"></div>
</div>

<div class="block">
  <div id="div_land3"></div>
</div>

<div class="block">
  <div id="div_land4"></div>
</div>

并且仅当元素在视口上时才使用javascript代码淡入

<script type="text/javascript">

      // our story
      $(window).scroll(function () {
        console.log($(window).scrollTop());
        var trigger_ourstory = ( $(window).height() * 1) - 150;
        if ($(window).scrollTop() >= trigger_ourstory) {

            $('#div_ourstory').css('visibility', 'visible').hide().fadeIn('slow');
            $(this).off('scroll');

        }
      });

      // land 2
      $(window).scroll(function () {
        console.log($(window).scrollTop());
        var trigger_and2 = ( $(window).height() * 2) - 150;
        if ($(window).scrollTop() >= trigger_airport) {

            $('#div_land2').css('visibility', 'visible').hide().fadeIn('slow');
            $(this).off('scroll');

        }
      });
</script>

仅供参考：每个div class =“ block”的高度为视口高度的100％ 但这仅适用于第一个区块，而其他区块不适用