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

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

ただいまの
回答率

90.51%

  • HTML

    11474questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • jQuery

    8150questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • CSS

    7536questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

ブラウザ幅によって使用するjQueryを切り替えたいのですが…

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,391

atsushi_m

score 5

前提・実現したいこと

とにかく困ってしまい、質問させていただきます。
jqueryについて全くの素人ですが、何卒よろしくお願いいたします。

フレキシブルレイアウトのWEBサイトを制作中です。
1.ブラウザ幅600px以上の場合、一定以上スクロールするとメニューを上部に固定
2.ブラウザ幅599px以下の場合はバーガーメニューに変更

それぞれ違うjsを利用しています。
ブラウザ幅によって1.と2.のjsを切り替えたいのですが、どのようにすればよいでしょう?

発生している問題

1.と2.が干渉しているのか思っているような動作になりません。

該当のソースコード

$(function() {
    var current = 'small';
    $(window).resize(function() {
        var w = $(window).width();
        var x = 599;
        if (w <= x && current !== 'small') {

                        // 599px以下のときの処理
            $(function() {
    $('#navToggle').click(function(){//headerに .openNav を付加・削除
        $('header').toggleClass('openNav');
    });
});


            current = 'small';
        } else if (w > x && current !== 'big') {

                        // 600px以上のときの処理
            $(function() {
    var nav = $('nav'),
    offset = nav.offset();
    $(window).scroll(function () {
      if($(window).scrollTop() > offset.top) {
        nav.addClass('fixed');
      } else {
        nav.removeClass('fixed');
      }
    });
});

            current = 'big';
        }
    });
});

試したこと

上記のコードについて、他の質問の回答で「これで切り替えできるのでは?」というのを見つけて参考にさせていただいたのですが…
どうにもうまくいきませんでした。

補足情報(言語/FW/ツール等のバージョンなど)

htmlとcssについては多少わかるのですが、jqueryについては本当に素人で…それでもつくりたいサイトがあるので、いろいろなネットの記事を参照しながら作業をしました。が、…完全に行き詰まってしまいました。

【追記】
https://teratail.com/questions/15586

ご覧いただきありがとうございます。上記URLの質問についての回答を参考にしました。

【試してみたこと】

1.元のコード
offset = nav.offset();
—中略--
$(window).scroll(function () {
if($(window).scrollTop() > offset.top) {
nav.addClass('fixed');
} else {
nav.removeClass('fixed');
}
});

【結果】動作する


2.いただいた定義+いただいたコード
var offset = nav.offset().top;
―中略--
    $(window).scroll(function () {
        // スクロールされたらその都度判定する
        if (current !== 'big') {
            // クラスを切り替え
            nav.toggleClass('fixed', this.scrollTop() > offset);
        }
    });

【結果】動作せず


3.いただいた定義+元のコード
var offset = nav.offset().top;
―中略--
$(window).scroll(function () {
if($(window).scrollTop() > offset.top) {
nav.addClass('fixed');
} else {
nav.removeClass('fixed');
}
});

【結果】動作せず


4.元の定義+いただいたコード
offset = nav.offset();
—中略--
    $(window).scroll(function () {
        // スクロールされたらその都度判定する
        if (current !== 'big') {
            // クラスを切り替え
            nav.toggleClass('fixed', this.scrollTop() > offset);
        }
    });

【結果】動作せず


5.元の定義+元のコードをアレンジ
offset = nav.offset();
—中略--
$(window).scroll(function () {
if (current !== 'big') {
// 上の行をいただいた内容にアレンジ
nav.addClass('fixed');
} else {
nav.removeClass('fixed');
}
});

【結果】addは動作するもremoveは動作せず(スクロール時に固定されるが、スクロールを戻した時に固定解除とはならない)
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

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

  • SurferOnWww

    2016/10/16 16:53

    「他の質問の回答・・・」と言うところの他の質問の URL を開示できませんか?

    キャンセル

  • atsushi_m

    2016/10/16 17:04

    ご覧いただきありがとうございます。「補足情報」に追記いたしました。

    キャンセル

回答 2

checkベストアンサー

+4

jQuery の関数の意味を一つ一つ調べて進めてみましょう。

まず下の構文ですが、ページの DOM が構築された段階(≒ 画像を除くページの初回読み込み完了時)に、渡した関数を実行するように登録します。つまりブラウザーのウィンドウの幅が変わるたびに登録し直す必要はありません。

$(function () {
    // 初回読み込み完了時に一度実行される
});

つづいてイベントの構文です。これらはそれぞれのイベントが発生したときに渡した関数を実行するように登録します。同じように一度登録すれば十分です。

$(window).click(function () {
    // クリックされるたびに実行される
});

$(window).resize(function () {
    // リサイズされるたびに実行される
});

$(window).scroll(function () {
    // スクロールされるたびに実行される
});

これらを組み合わせて次のように書きます。ポイントはイベントは *登録* である点です。その都度登録/解除する方法もありますがこの方が効率的です。

$(function () {
    var current = 'small';
    var nav = $('nav');
    var offset = nav.offset().top;

    $(window).resize(function () {
        var w = this.width();
        var x = 599;
        if (w <= x && current !== 'small') {
            // 599px以下のときの処理
            // ここでメニューを非表示にするなどしてください
            current = 'small';
        } else if (w > x && current !== 'big') {
            // 600px以上のときの処理
            // ここでバーガーメニューを表示するなどしてください
            current = 'big';
        }
    });

    $('#navToggle').click(function () {
        // クリックされたらその都度判定する
        if (current === 'small') {
            $('header').toggleClass('openNav');
        }
    });

    $(window).scroll(function () {
        // クラスを切り替え
        nav.toggleClass('fixed', this.scrollTop() > offset);
    });
});

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2016/10/16 19:33

    chitoku様
    ご回答いただき、ありがとうございます!ご配慮いただき丁寧な解説も非常に助かります!
    いただいた回答を拝見して少しコードと格闘しています…うまくいきましたら改めてお返事させていただきますが、すみません少し時間がかかりそうな雰囲気なため…ひとまずお礼申し上げます!

    キャンセル

  • 2016/10/16 22:55

    chitoku様
    おかげさまでやっとどうにか思い通りの形になりました!なかなかうまくいかなかったのですが、cssにも間違いがありました…。素人なものでいろいろ大変でしたが、chitoku様のアドバイスがなかったらと思うと。。。本当に助かりました!!

    ただ、じつはまだ一点解決しきれていないところがあります。
    $(window).scroll(function () {
    // スクロールされたらその都度判定する
    if (current === 'big') {
    // クラスを切り替え
    nav.toggleClass('fixed', this.scrollTop() > nav.offset().top);
    }
    });

    書いていただいた最後の部分がどうしても反応してくれませんでした。

    今のところ私がもともと使っていた部分を引用し、
    offset = nav.offset();
    $(window).scroll(function () {
    if($(window).scrollTop() > offset.top) {
    nav.addClass('fixed');
    } else {
    nav.removeClass('fixed');
    }
    });
    とすることで解消はされたのですが…chitoku様にいただいた回答の方が素人目にもシンプルだと思いました。
    この点について再度アドバイスいただくことはできますでしょうか?

    なお、もしここで質問することがマナー違反であれば、あらためて別の質問として投稿させていただきます。(当サイトを初めて使うもので…よく理解できておらず、すみません。)

    とはいえ、本当にありがとうございます!!

    キャンセル

  • 2016/10/16 23:24

    ごめんなさい、逆ですね…
    current !== 'big'
    だとどうですか?

    キャンセル

  • 2016/10/17 11:04

    chitoku様
    早々にご回答いただき、ありがとうございます!

    ごめんなさい…うまくいきませんでした。。
    私なりに周辺もひとしきり触ってみたのですが、、、

    今回アドバイスいただいたのは、
    if (current === 'big') {

    if (current !== 'big') {
    ということで合ってますでしょうか?(ど素人ですみません…)

    キャンセル

  • 2016/10/18 15:38

    確かに atsushi_m さんのコードのように offset は予め取得しておかないとダメそうです……回答を修正してみましたがどうでしょうか…?

    キャンセル

  • 2016/10/18 17:35

    chitoku様
    お忙しい中、たびたび回答していただきありがとうございます!!
    試してみたのですが、うまくいかず、、でした。せっかくお力添えいただいたのに…すみません。

    ひとまず、私なりにいくつか試してみました。
    試したコードは上の「補足情報」に追記させていただきました。
    (長くなってしまいました。急いではおりません、お時間のある時で結構です!)


    その結果から、「今回の場合、toggleClassでのオンオフが効かない」という推測を立てたのですが…なにかchitoku様に思い当たることはございますか?
    (ちなみに、使用ブラウザはsafari(10)とchrome(54)で、どちらもMacOS版です。)

    とにもかくにも、ありがとうございます!

    キャンセル

  • 2016/10/18 21:38

    うーん……判定を外すとどうですか?(回答修正しました)

    キャンセル

  • 2016/10/19 00:59

    chitoku様
    早々にありがとうございます!
    いただいたコードにしてみましたが…動作せずでした。。。

    どうにもお手をわずらわせてしまって、申し訳ないです。

    キャンセル

  • 2016/10/19 02:08

    toggleClass が効いていない… jQuery のバージョンはいくつになりますか?
    jQuery.fn.jquery で調べられます。

    キャンセル

  • 2016/10/19 10:14

    chitoku様
    jQueryのバージョンは1.9.1でした。
    同じページにjQueryを使った画像スライダを使っており、その際に記述しました。

    と、ここで気づいたのですが、そのスライダのjQueryと干渉しているのか…と思い、そちらを外してみたのですが、結果は変わらずでした。。。

    キャンセル

  • 2016/10/25 22:11

    chitoku様

    先般はいろいろとアドバイスをいただきありがとうございます。
    他にも少し手を加えてみましたが…、どうにもうまくいきませんでした。
    とりあえず今回は動作を優先し、元のコードを使うことにいたしました。

    いずれにしてもアドバイスをいただき本当に助かりました、ありがとうございます!

    キャンセル

+2

「他の質問の回答・・・」は今回の問題とはあまり関係なかったようですね。すみません。

全体が分からないので別のところにも問題があるのかもしれませんが、少なくとも提示されていたソース内の $(function() { ... }); の使い方は変です。

ここは jQuery の基本のキなのですが、意味を理解して使っているでしょうか? ブラウザの読み込み完了のイベントで { ... } 内を実行するというものですが、それがネストしているのはどういうわけでしょう?

そのあたりを見直されてはいかがですか。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2016/10/16 19:41

    SurferOnWww様
    ご回答いただきありがとうございます!
    正直なところ意味もわからず使っておりました、ご指摘の通りでお恥ずかしい限りです。
    いましがた急場の勉強をして、だいたいですがいただいた回答の内容を理解しました。
    別の方ではございますが、いただいた回答を元にもう一度解決に向けて取り組んでおります。取り急ぎお礼申し上げます!

    キャンセル

  • 2016/10/16 23:01

    SurferOnWww様
    時間がかかりましたが、おかげさまでどうにか思い通りの形にすることができました。アドバイスいただき、本当にありがとうございます!
    わずかでも勉強したことでjQueryについて関心が出てきました。少しずつでも学んでいきます!

    キャンセル

  • 2016/10/16 23:09

    頑張ってください。あなたのような丁寧な対応をされる方が、ソフト開発でも成功者になれるのではないかと思います。(上から目線のようでスミマセン)

    キャンセル

  • 2016/10/17 11:05

    SurferOnWww様
    ありがとうございます、励みになります!

    キャンセル

同じタグがついた質問を見る

  • HTML

    11474questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • jQuery

    8150questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • CSS

    7536questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。