リサイズ実行時の挙動について

Question

前提・実現したいこと

以下のjsにより、リサイズ時に
768以上では、表示させないようにしたいのですが、
768以下から768以上にウィンドウを変更したときに
要素が非表示にならず、表示されたままになってしまいます。

該当のソースコード

$(window).on('load resize', function(){
        var w = $(window).width();
        var x = 768;
        if (w < x) {
$(window).on("scroll touchmove", function(){ //スクロール中に判断する
			$(".flo_ban").stop(); //アニメーションしている場合、アニメーションを強制停止
			$(".flo_ban").css('display', 'none').delay(500).fadeIn('fast');
			//スクロール中は非表示にして、500ミリ秒遅らせて再び表示
	});

        } else {
//それ以外のときの処理
$('.flo_ban').hide();
        }
      });

Comments

[cerfweb]

「要素が非表示にならず、表示されたまま」ではなくてその逆じゃないですか？

[satoru225Simple]

ありがとうございます。
逆かどうかわかりませんが、
768以上では、非表示の状態になるようにしたいと思っております。
言い方がややこしく申し訳ございません。

[cerfweb]

提示されているコードを再現してみると、768px以上で非表示になりますが、そのままウィンドウサイズをドラッグして変えても非表示のままです。

[satoru225Simple]

すみません。
もう少し状況を説明するべきでした。
768以上でブラウザを開く→ウィンドウサイズを768以下に変えて要素を表示→再度768以上に変え、スクロールを実行すると、表示されてしまう。
といった状態です。
https://codepen.io/anon/pen/qvdVOK
上記に、自分の現状のコードをほかの方が再現してくださいましたので、
試していただけますと幸いです。

[cerfweb]

上記確認いたしました。別の回答を追加しましたのでご確認ください。

Answer 1

イベントの適用の仕方に問題があるようなので、こうしてみてはいかがでしょうか。

$(function(){
  test();  // htmlの読み込み完了時に実行される
  var timer = false;
		
  $(window).on('resize scroll touchmove', function(){
    $(".flo_ban").hide();  // resize scroll touchmove中は要素を隠す
    if (timer !== false) {
      clearTimeout(timer);
    }
    timer = setTimeout(function(){
      test();  // resize scroll touchmoveイベントの完了から500ms後に実行される
    }, 500);
  });
});
	
function test(){
  var w = $(window).width();
  var x = 768;
  if (w < x) {
    $(".flo_ban").fadeIn('fast');
  } else {
    $(".flo_ban").hide();
  }
}

Comments

[satoru225Simple]

ありがとうございます！
本日は事情により試せないため、
また明日上のプログラムを適用次第、結果を報告させていただけたらと思います。
何卒よろしくお願い致します。

[satoru225Simple]

返事が遅くなってしまい申し訳ありません。
無事うまく動くようになりました！
ありがとうございました！

Answer 2

ifの中でもdisplay noneだし、elseのとこでもhideしてるし、そりゃあ表示されない
どっちかで表示をしなきゃ
https://codepen.io/anon/pen/gEpGXB

Comments

[退会済みユーザー]

a

[satoru225Simple]

申し訳ございません。
どうお答えすれば不具合を伝えらえるか考えておりました、
いただいたコードですと
768以上でブラウザを開く→ウィンドウサイズを768以下に変えて要素を表示→再度768以上に変え、スクロールを実行すると、表示されてしまう。

といった具合になってしまうため、再度768以上にして、スクロールを行っても、表示されないようにしたいと思っております。
失礼な態度になってしまい申し訳ございません。

何卒宜しくお願い致します。

Answer 3

Window幅が768pxより小さくなった時に表示されないので、以下で解決するんじゃないでしょうか。

if (w < x) {
  $('.flo_ban').show();  // この一文を追加
  /* $(window).on(...);以下省略　*/
}