リサイズすると中のif文が上手く動かない

Question

はじめまして。
現在ウェブサイトを作成しており、jsがうまくいきません。

---

▼出来ないこと

横幅960px以上ではメニューのスタイルを各セクションによって変更したいのですが
それより小さい場合はトグルメニューでスタイルは一括したいです。

960 > $(window).width(); の条件式でスタイル調整していますが
初期サイズから横幅変えるとスタイルは初期のままなので
リサイズいれたところとうまくいきません。
例えばpcサイズからタブレットサイズまで縮めるとpcサイズのスタイルがそのまま残ってしまいます。
（タブレットサイズからpcサイズにする時はうまくいきます。）

console.logをみるとpcからタブレットにリサイズしてもタブレットサイズ条件のコンスルとpcサイズ条件でのコンソルも出てしまいます。
コンソル例（下コードから）
Sresizeclear
Rabout-productClear　←これが現れる（pcサイズ時に出るはずのコンソル）

▼ソース

$(function(){
    var w = $(window).width();　　　// 横幅取得
    var n = 960;
    if(w > n){　　　//タブレットより大きいデバイス
      
      console.log("Lclear");
    　 // セクションごとにメニューのスタイルを変える
      $(function(){
        $(window).scroll(function(){
          // ABOUT-PRODUCT間　
          if ($(window).scrollTop() > $('#about').offset().top &&　$(window).scrollTop() < $('#contact').offset().top){
            console.log("about-productClear");
            // クラス追加　（文字色（黒）、padding変更）
            $("header").addClass("is-animation");
            $("header").removeClass("contact-animation");

          //CONTACTセクション　
          }else if ($(window).scrollTop() > $("#product").offset().top){
            //　クラス追加　（文字色（白）、padding変更）
            $("header").removeClass("is-animation");
            $("header").addClass("contact-animation");

          // それ以外のセクション（TOP）
          }else{
            $("header").removeClass("is-animation");
            $("header").removeClass("contact-animation");
          };
        });
      });
　  };
});
$(window).resize(function(){  //リサイズ用 　上とほぼ同じ処理
  $(function(){
    var w = $(window).width();　　// 横幅取得
    var n = 960;
    if(w > n){  //タブレットより大きいデバイス
      console.log('Lresizeclear');
      $('.nav').css('display','block');
  　　// セクションごとにメニューのスタイルを変える
      $(function(){
        $(window).scroll(function(){

          // ABOUT-CONTACT間
          if ($(window).scrollTop() > $('#about').offset().top &&　$(window).scrollTop() < $('#contact').offset().top){
            console.log("Rabout-productClear");
            $("header").addClass("is-animation");

          // それ以外のセクション
          }else{
            $("header").removeClass("is-animation");
          };
        });
      });

    }else { //タブレットより小さい
      console.log('Sresizeclear');
      $('.nav').css('display','none');
      $("header").removeClass("is-animation");
    };
  });
});

読みにくいかと思いますが、お願い致します。
また、書き方ももっとまとめる方法ありましたら、ご指摘お願い致します。

Comments

[m.ts10806]

「初心者」自体は要件とは違うと思いますので、質問文に書くのではなく「初心者アイコン」を利用してください。

[miyabi-sun]

読みにくいのはコードの字下げ(インデント)がぐしゃぐしゃなだけです。整形ツールやまともなエディタを使ってインデントを整形してください。

Answer 1

resizeやscrollなど何度もイベントが起きるイベント中に別のイベントを登録すると同じイベントを何度も登録することになってしまいます。（きちんと丁寧にイベントを解除しながら処理することは可能です）
フラグ変数wをresizeに任せ、scroll中の内容についてはif (w > n) {}で分岐するのが手早いと思います。

// HTMLが提示されていないので内容は確認していません。
$(function() {
    var w = $(window).width(); // 横幅取得
    var n = 960;

    // セクションごとにメニューのスタイルを変える
    $(window).scroll(function() {
        // ABOUT-PRODUCT間　
        if ($(window).scrollTop() > $('#about').offset().top && $(window).scrollTop() < $('#contact').offset().top) {
            console.log("about-productClear");
            // クラス追加　（文字色（黒）、padding変更）
            $("header").addClass("is-animation");
            $("header").removeClass("contact-animation");

            //CONTACTセクション　
        } else if ($(window).scrollTop() > $("#product").offset().top) {
            //　クラス追加　（文字色（白）、padding変更）
            $("header").removeClass("is-animation");
            $("header").addClass("contact-animation");

            // それ以外のセクション（TOP）
        } else {
            $("header").removeClass("is-animation");
            $("header").removeClass("contact-animation");
        }
    });
    $(window).resize(function() { //リサイズ用 　上とほぼ同じ処理
        w = $(window).width(); // 横幅取得
        if (w > n) { //タブレットより大きいデバイス
            console.log("Lclear");
            $('.nav').css('display', 'block');
        } else { //タブレットより小さい
            console.log('Sresizeclear');
            $('.nav').css('display', 'none');
            $("header").removeClass("is-animation");
        };
    });
});

$(function() {}); は外側に1回だけで十分です。（ $(function() {$(function() {});}); とすることは意味が無いです）

Comments

[nana_ton]

回答ありがとうございます！
質問なのですが、
「scroll中の内容についてはif (w > n) {}で分岐する」というのはif (w > n) {scroll...}ということでしょうか。回答のコードではresizeの時のみにそれが書かれているので、初期にタブレットサイズ（リサイズしない場合）だとscroll関数が発火してしまいます。

[nana_ton]

すみません、scrollの中にif (w > n)といった意味だったのでしょうか。
それで上手くいくようになりました！
途方にくれていたのでとても助かりました。ありがとうございます。