指定した範囲で表示、非表示の切り替え

html**

<script>
window.addEventListener('DOMContentLoaded', function (event) {
  
  var scrollStart = $('.area01').offset().top; //ページ上部からの距離を取得
    var scrollEnd = $('.topics').offset().top; //ページ上部からの距離を取得
    var windowHeight = $(window).height(); //ウインドウの高さを取得
    var distance = 0;
     
    $(document).scroll(function(){
     distance = $(this).scrollTop(); //スクロールした距離を取得
     console.log(distance);
     console.log(scrollStart);
     console.log(scrollEnd);
     
     
    if (distance + windowHeight/2 < scrollStart || distance + windowHeight/2 > scrollEnd) {
      $('.fix_square').fadeOut();
      // console.log('外');
     } else{
      $('.fix_square').fadeIn();
      // console.log('中');
     }
    });

});
</script>