ご覧いただきありがとうございます。
ホームページを作っており、ヘッダーの挙動を制御できずに困っております。お助けください。
【やりたいこと】
・ウィンドウ幅581px以上の場合:70pxスクロールしたらヘッダーを細くし、画面上部に固定表示
・ウィンドウ幅580px未満の場合:ヘッダーを40pxにしスクロール関係なく画面上部に固定表示
【できてること】
・それぞれのサイズのデバイスで読み込んだ際は思った通りに動きます。
・581px以上をベースにcssを組み、580px以下の際はメディアクエリで要素のcssを書き換えています。
・581px以上の際は、以下のコードによって70px以上スクロールしたら要素のid,classを変え、cssで見た目を整えています。
【困っていること】
・一度読み込んだあとにブラウザの幅を変えると、最初に読み込んだwindow幅での挙動のままになってしまう。
具体的には
①PCで70px以上スクロールした状態でスマホサイズにブラウザを縮めると、classなどが変わったままの状態でスマホ表示になりレイアウトが崩れる。
②逆のスマホサイズで読み込んでからブラウザを広げると、関数自体が機能していない。
ウィンドウ幅を変えたら改めてウィンドウ幅をはかり、関数を実行または不実行するようにしたいです。
jQuery
1if (window.matchMedia('(min-width: 581px)').matches) { 2 var $window = $(window); 3 var sticky = false; 4 $window.on("scroll", function () { 5 if ($window.scrollTop() > 70) { 6 if ( sticky === false ){ 7 $("#headerbox").attr("id","thinheaderbox"); 8 $("#header").attr("id","thinheader"); 9 $(".headerline").addClass("thinheaderline"); 10 $(".headerlogo").addClass("thinheaderlogo"); 11 $("#thinheaderbox").fadeIn(500); 12 sticky = true; 13 } 14 } else { 15 if ( sticky === true ){ 16 $("#thinheaderbox").attr("id","headerbox"); 17 $("#thinheader").attr("id","header"); 18 $(".headerline").removeClass("thinheaderline"); 19 $(".headerlogo").removeClass("thinheaderlogo"); 20 $("#thinheaderbox").fadeOut(0); 21 sticky = false; 22 }; 23 }; 24 }); 25};
上記functionを変数に格納し、$(window).resize(function(){実行}を試しましたが、うまく機能させることができませんでした。
勉強仲間に相談しましたが具体的なコードが書けませんでしたので、お教え頂けるとありがたいです。
宜しくお願い致します!
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2015/08/16 15:31
2015/08/17 00:51
退会済みユーザー
2015/08/17 04:42