質問編集履歴

2 試してみたことを追記

atsushi_m

atsushi_m score 5

2016/10/18 17:31  投稿

ブラウザ幅によって使用するjQueryを切り替えたいのですが…
###前提・実現したいこと
とにかく困ってしまい、質問させていただきます。
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の質問についての回答を参考にしました。
ご覧いただきありがとうございます。上記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は動作せず(スクロール時に固定されるが、スクロールを戻した時に固定解除とはならない)
```
  • HTML

    11908 questions

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

  • CSS

    7816 questions

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

  • jQuery

    8374 questions

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

1 参考にさせていただいたURLを追記しました。

atsushi_m

atsushi_m score 5

2016/10/16 17:03  投稿

ブラウザ幅によって使用するjQueryを切り替えたいのですが…
###前提・実現したいこと
とにかく困ってしまい、質問させていただきます。
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については本当に素人で…それでもつくりたいサイトがあるので、いろいろなネットの記事を参照しながら作業をしました。が、…完全に行き詰まってしまいました。
htmlとcssについては多少わかるのですが、jqueryについては本当に素人で…それでもつくりたいサイトがあるので、いろいろなネットの記事を参照しながら作業をしました。が、…完全に行き詰まってしまいました。
【追記】
https://teratail.com/questions/15586
ご覧いただきありがとうございます。上記URLの質問についての回答を参考にしました。
  • HTML

    11908 questions

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

  • CSS

    7816 questions

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

  • jQuery

    8374 questions

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

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る