はじめまして。
現在ウェブサイトを作成しており、jsがうまくいきません。
▼出来ないこと
横幅960px以上ではメニューのスタイルを各セクションによって変更したいのですが
それより小さい場合はトグルメニューでスタイルは一括したいです。
960 > $(window).width(); の条件式でスタイル調整していますが
初期サイズから横幅変えるとスタイルは初期のままなので
リサイズいれたところとうまくいきません。
例えばpcサイズからタブレットサイズまで縮めるとpcサイズのスタイルがそのまま残ってしまいます。
(タブレットサイズからpcサイズにする時はうまくいきます。)
console.logをみるとpcからタブレットにリサイズしてもタブレットサイズ条件のコンスルとpcサイズ条件でのコンソルも出てしまいます。
コンソル例(下コードから)
Sresizeclear
Rabout-productClear ←これが現れる(pcサイズ時に出るはずのコンソル)
▼ソース
$(function(){ var w = $(window).width(); // 横幅取得 var n = 960; if(w > n){ //タブレットより大きいデバイス console.log("Lclear"); // セクションごとにメニューのスタイルを変える $(function(){ $(window).scroll(function(){ // ABOUT-PRODUCT間 if ($(window).scrollTop() > $('#about').offset().top && $(window).scrollTop() < $('#contact').offset().top){ console.log("about-productClear"); // クラス追加 (文字色(黒)、padding変更) $("header").addClass("is-animation"); $("header").removeClass("contact-animation"); //CONTACTセクション }else if ($(window).scrollTop() > $("#product").offset().top){ // クラス追加 (文字色(白)、padding変更) $("header").removeClass("is-animation"); $("header").addClass("contact-animation"); // それ以外のセクション(TOP) }else{ $("header").removeClass("is-animation"); $("header").removeClass("contact-animation"); }; }); }); }; }); $(window).resize(function(){ //リサイズ用 上とほぼ同じ処理 $(function(){ var w = $(window).width(); // 横幅取得 var n = 960; if(w > n){ //タブレットより大きいデバイス console.log('Lresizeclear'); $('.nav').css('display','block'); // セクションごとにメニューのスタイルを変える $(function(){ $(window).scroll(function(){ // ABOUT-CONTACT間 if ($(window).scrollTop() > $('#about').offset().top && $(window).scrollTop() < $('#contact').offset().top){ console.log("Rabout-productClear"); $("header").addClass("is-animation"); // それ以外のセクション }else{ $("header").removeClass("is-animation"); }; }); }); }else { //タブレットより小さい console.log('Sresizeclear'); $('.nav').css('display','none'); $("header").removeClass("is-animation"); }; }); });
読みにくいかと思いますが、お願い致します。
また、書き方ももっとまとめる方法ありましたら、ご指摘お願い致します。
回答1件
あなたの回答
tips
プレビュー