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は動作せず（スクロール時に固定されるが、スクロールを戻した時に固定解除とはならない） |
| ``` |
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の質問についての回答を参考にしました。 |
