jQueryでブラウザの幅と、スクロール量を取得して表示方法を切り替える

Question

今回はブラウザ幅480px以下の場合で尚且つページトップから100pxスクロールした場合にのみ、#contact_fixed_spの部分を表示したいと思っています。
それぞれブラウザの幅におおじて表示非表示を切り替えるコードとスクロール量を取得してfadeIn/fadeOutさせるコードは何とかできたのですがその先が分かりません。
どなたかお教えいただけると助かります。宜しくお願いいたします。

<div id="contact_fixed_sp">
<a>contact_btn</a>
</div>

.invisible { display:none; }

<script>
    $(function() {
  
    $(window).scroll(function(){
      // 対象までの高さ
      var distanceTop = 100;

      if ($(window).scrollTop() > distanceTop) {
        $('#contact_fixed_sp').fadeIn("slow");
      } else {
        $('#contact_fixed_sp').fadeOut("slow");
      }
    });
  });
  </script>
  <script>
    var checkWidth = function() {
      var browserWidth = $(window).width();
      
      if(browserWidth <= 480){
        $('#contact_fixed_sp').removeClass('invisible');
      }else{
        $('#contact_fixed_sp').addClass('invisible');
      }
    };
    
    $(function(){
      checkWidth();
      $(window).resize(checkWidth);
    });
  </script>

頂いた回答を元に少しこんな感じかなというのを下記に書き足してみましたがやはり実装できません。どこが間違っているのかご指摘いただけると助かります。jQueryは書き方の基礎もないのでお恥ずかしい限りです。

#contact_fixed_sp {
  display: none;
}
@media screen and (max-width:480px) { 
#contact_fixed_sp {
  display: block;
}
}

<script>
    $(window).resize(function(){
    var w = $(window).width();
    var x = 480;
      if (w <= x) {
      .on('scroll', function () {
        var distanceTop = 130;
        var $contactFixedSp = $('#contact_fixed_sp');

        if ($(window).scrollTop() > distanceTop) {
          $contactFixedSp
            .stop()
            .fadeIn("normal");
        }
        else {
          $contactFixedSp
            .stop()
            .fadeOut("normal");
        }
      })
      .trigger('scroll');
      });
  </script>

Answer 1

480px以上の場合、要素を非表示にしたのであれば、よほど理由がない限り、CSSのメディアクエリを利用した方が手っ取り早いです。

また、フェードイン・アウトの処理を行う際、上下スクロールを高速で行うと、その回数分フェードイン・アウトが走ってしまい、要素が明滅する感じになるので、アニメーションを止めるstopを追加し、余計なアニメーションを停止させるようにしてください。

@media all and (min-width: 481px) {
  #contact_fixed_sp {
    display: none;
  }
}

@media all and (max-width: 480px) {
  #contact_fixed_sp {
    display: none;
    position: fixed;
    right: 0;
    top: 0;
  }
  
  #contact_fixed_sp.show {
    display: inline-block;
  }
}

$(window)
  .on('scroll', function () {
    var distanceTop = 100;
    var $contactFixedSp = $('#contact_fixed_sp');

    if ($(window).scrollTop() > distanceTop) {
      $contactFixedSp
        .stop()
      	.fadeIn("slow", function () {
        	$(this)
            .css({ display: '', opacity: '', })
            .addClass('show');
      	});
    }
    else {
      $contactFixedSp
        .stop()
        .fadeOut("slow", function () {
        	$(this)
            .css({ display: '', opacity: '', })
            .removeClass('show');
        });
    }
  })
  .trigger('scroll');

https://jsfiddle.net/takmatz/x059mbjt/

Comments

[Yucchi]

ありがとうございました。jQueryやjavascriptはまだダメダメで…本当に助かりました。ただこの場合だとブラウザーのサイズが480px以上の場合にも#contact_fixed_spが表示されてしまいます。

Answer 2

CSSクラスによる指定(.invisible)と、JSによる制御では、JSの処理の方が勝ってしまいます。

<div class="invisible" style="display:block;">これは表示されてしまう</div>

スクロールとリサイズイベントの両方で、表示制御のための同じ関数を呼ぶようにしてはどうでしょうか。
以下のようなイメージです。

$(function(){
    var switchDisplay = function(){
        var element = $("#contact_fixed_sp");
        if( $(window).width() <= 480 && $(window).scrollTop() >= 100 ){
            element.stop(true, false).fadeIn("slow");
        }else{
            element.stop(true, false).fadeOut("slow");
        }
    };
    $(window).on("resize scroll", switchDisplay);
});

このようにすれば、invisibleクラスをつけたり外したりといった処理も不要になると思います。