スクロールしてFadeIn＆FadeOutする要素をスマホで非表示にしたい

Question

前提・実現したいこと

JS初心者のWEBデザイナーです。

レスポンシブサイトを作成しておりまして、右側に追随するメニュー(fixed_content)をつけているのですが、PCの場合は特定のスクロール位置まで来たらfixed_contentをfadeIn＆fadeOutしたく、スマホの場合はそのメニュー自体が非表示になるようにしたいと思っているのですが、うまく挙動せず悩んでおります。。。

発生している問題・エラーメッセージ

スマホサイズにした場合は、display:none;となるようメディアクエリで指定しているのですが、それが反映されずcssの当たらない状態のソースが表示されてしまいます。

該当のソースコード

$(window).scroll(function () {
  var scrollTop = $(window).scrollTop();
  if( 1000 < scrollTop && scrollTop < 2000){
    $('.fixed_content').fadeOut();
  }else{
    $('.fixed_content').fadeIn();
  }
});

試したこと

試しに、以下のように追記をしてみたのですが、スマホサイズで非表示にはなるようになるのですが、今度はfadeInとfadeOutが効かなくなってしまいました。

$(window).scroll(function () {
var scrollTop = $(window).scrollTop();
if( 1000 < scrollTop && scrollTop < 2000 && !window.matchMedia('screen and (min-width: 768px)')){
$('.fixed_content').fadeOut();
}else{
$('.fixed_content').fadeIn();
}
});

補足情報（FW/ツールのバージョンなど）

どこにミスがあるのか、どうか詳しい方ご教授いただけますでしょうか。。。。
よろしくお願いいたします！

Answer 1

マッチしたかどうかは matches プロパティまで見ないとわかりません。

if (1000 < scrollTop && scrollTop < 2000 || !window.matchMedia('screen and (min-width: 768px)').matches) {

https://developer.mozilla.org/ja/docs/Web/API/Window/matchMedia

しかし、.fadeIn() / .fadeOut() を使うとインラインスタイルを変えてしまうため、厳密には resize まで見ないと不具合が出ます。

そのため、スクリプトでは class の変更にとどめ、アニメーションは CSS で行うことをお勧めします。

$('.fixed_content').toggleClass('show', scrollTop <= 1000 || 2000 <= scrollTop);

.fixed_content {
  visibility: hidden;
  opacity: 0;
  transition: all 400ms;
}

@media screen and (min-width: 768px) {
  .fixed_content.show {
    visibility: visible;
    opacity: 1;
  }
}

https://developer.mozilla.org/ja/docs/Web/CSS/transition

Comments

[MegumiS]

ありがとうございます！インラインスタイルまで変わってしまうんですね。なんとかできました！ありがとうございました！

Answer 2

jQueryはstyleを直接編集するので、優先順位が負けているだけでは。

.fixed_content {
    display: none !important;
}

【!importantはもう使わない！CSSの優先順位をおさらいしよう | アライドアーキテクツのクリエイターブログ】
http://creator.aainc.co.jp/archives/4947

Comments

[MegumiS]

ありがとうございます！私の書き方に問題があるのか、順番も変えてみたのですが、それだけではうまくいきませんでした。。。