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