質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.21%

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

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 384

bigginer_hara

score 14

はじめまして。
現在ウェブサイトを作成しており、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");
    };
  });
});


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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • m.ts10806

    2018/12/05 20:05

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

    キャンセル

  • miyabi-sun

    2018/12/05 22:27

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

    キャンセル

回答 1

checkベストアンサー

+4

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() {});}); とすることは意味が無いです)

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/12/06 11:22

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

    キャンセル

  • 2018/12/06 11:55

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.21%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる