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

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

新規登録して質問してみよう
ただいま回答率
85.50%
jQuery

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

HTML

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

CSS

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

Q&A

解決済

2回答

3404閲覧

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

atsushi_m

総合スコア20

jQuery

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

HTML

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

CSS

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

0グッド

0クリップ

投稿2016/10/16 07:42

編集2016/10/18 08:31

###前提・実現したいこと
とにかく困ってしまい、質問させていただきます。
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は動作せず(スクロール時に固定されるが、スクロールを戻した時に固定解除とはならない)

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2016/10/16 07:53

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

2016/10/16 08:04

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

回答2

0

ベストアンサー

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

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

lang

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

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

lang

1$(window).click(function () { 2 // クリックされるたびに実行される 3}); 4 5$(window).resize(function () { 6 // リサイズされるたびに実行される 7}); 8 9$(window).scroll(function () { 10 // スクロールされるたびに実行される 11});

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

lang

1$(function () { 2 var current = 'small'; 3 var nav = $('nav'); 4 var offset = nav.offset().top; 5 6 $(window).resize(function () { 7 var w = this.width(); 8 var x = 599; 9 if (w <= x && current !== 'small') { 10 // 599px以下のときの処理 11 // ここでメニューを非表示にするなどしてください 12 current = 'small'; 13 } else if (w > x && current !== 'big') { 14 // 600px以上のときの処理 15 // ここでバーガーメニューを表示するなどしてください 16 current = 'big'; 17 } 18 }); 19 20 $('#navToggle').click(function () { 21 // クリックされたらその都度判定する 22 if (current === 'small') { 23 $('header').toggleClass('openNav'); 24 } 25 }); 26 27 $(window).scroll(function () { 28 // クラスを切り替え 29 nav.toggleClass('fixed', this.scrollTop() > offset); 30 }); 31});

投稿2016/10/16 09:59

編集2016/10/18 12:38
chitoku

総合スコア1610

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

atsushi_m

2016/10/16 10:33

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

2016/10/16 13: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様にいただいた回答の方が素人目にもシンプルだと思いました。 この点について再度アドバイスいただくことはできますでしょうか? なお、もしここで質問することがマナー違反であれば、あらためて別の質問として投稿させていただきます。(当サイトを初めて使うもので…よく理解できておらず、すみません。) とはいえ、本当にありがとうございます!!
chitoku

2016/10/16 14:24

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

2016/10/17 02:04

chitoku様 早々にご回答いただき、ありがとうございます! ごめんなさい…うまくいきませんでした。。 私なりに周辺もひとしきり触ってみたのですが、、、 今回アドバイスいただいたのは、 if (current === 'big') { ↓ if (current !== 'big') { ということで合ってますでしょうか?(ど素人ですみません…)
chitoku

2016/10/18 06:38

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

2016/10/18 08:35

chitoku様 お忙しい中、たびたび回答していただきありがとうございます!! 試してみたのですが、うまくいかず、、でした。せっかくお力添えいただいたのに…すみません。 ひとまず、私なりにいくつか試してみました。 試したコードは上の「補足情報」に追記させていただきました。 (長くなってしまいました。急いではおりません、お時間のある時で結構です!) その結果から、「今回の場合、toggleClassでのオンオフが効かない」という推測を立てたのですが…なにかchitoku様に思い当たることはございますか? (ちなみに、使用ブラウザはsafari(10)とchrome(54)で、どちらもMacOS版です。) とにもかくにも、ありがとうございます!
chitoku

2016/10/18 12:38

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

2016/10/18 15:59

chitoku様 早々にありがとうございます! いただいたコードにしてみましたが…動作せずでした。。。 どうにもお手をわずらわせてしまって、申し訳ないです。
chitoku

2016/10/18 17:08

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

2016/10/19 01:14

chitoku様 jQueryのバージョンは1.9.1でした。 同じページにjQueryを使った画像スライダを使っており、その際に記述しました。 と、ここで気づいたのですが、そのスライダのjQueryと干渉しているのか…と思い、そちらを外してみたのですが、結果は変わらずでした。。。
atsushi_m

2016/10/25 13:11

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

0

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

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

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

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

投稿2016/10/16 10:21

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

atsushi_m

2016/10/16 10:41

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

2016/10/16 14:01

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

退会済みユーザー

2016/10/16 14:09

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

2016/10/17 02:05

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問