質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

jQuery

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

CSS

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

Q&A

1回答

2737閲覧

ウィンドウ幅によってヘッダーの挙動を変えたいです。一度読み込んだ後にウィンドウ幅を変更した場合の対応で困っています。

退会済みユーザー

退会済みユーザー

総合スコア0

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

jQuery

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

CSS

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

0グッド

0クリップ

投稿2015/08/16 12:50

ご覧いただきありがとうございます。
ホームページを作っており、ヘッダーの挙動を制御できずに困っております。お助けください。

【やりたいこと】
・ウィンドウ幅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(){実行}を試しましたが、うまく機能させることができませんでした。
勉強仲間に相談しましたが具体的なコードが書けませんでしたので、お教え頂けるとありがたいです。

宜しくお願い致します!

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

window resize の度に計算する発想は間違っていません。
が、こういう時の為に Media Queries があると思うのですが、どうしても jQuery で実装しなければならない理由があるでしょうか。

投稿2015/08/16 12:56

think49

総合スコア18156

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2015/08/16 15:31

ご回答ありがとうございます。 今回の場合、メディアクエリではスマホサイズで表示読み込み→ウィンドウ幅を広げた場合に、関数自体が読み込まれずヘッダーを細く固定できず困っております。 関数に、読み込んだ時のウィンドウ幅が581px以上の場合、スクロールによってclassを変える指定をしています。読み込んだ時に580px以下の場合は関数が実行されず、その状態でウィンドウを広げると、ヘッダーがスクロールに伴い細くなる動作ができませんでした。 メディアクエリでできるとしたら、どのような指定をすればよろしいかお教えいただけますでしょうか。 不勉強で恐縮ですが、宜しくお願い致します。
think49

2015/08/17 00:51

メディアクエリで関数は読み込めませんが、条件付で見た目を変えることは可能です。 id, class を追加したり、feed-in, feed-out するのは見た目を変化させるためと想像しましたが、違いましたでしょうか。 id, class は初めから付与した状態で width, height に応じて見た目を変化させてはいかがでしょう。 feed-in, feed-out は transition で実現可能です。 http://9-bb.com/css%E3%81%AEopacity%E3%81%A8transition-%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6%E3%83%95%E3%82%A7%E3%83%BC%E3%83%89%E3%82%A4%E3%83%B3%E3%83%BB%E3%83%95%E3%82%A7%E3%83%BC%E3%83%89%E3%82%A2%E3%82%A6/
退会済みユーザー

退会済みユーザー

2015/08/17 04:42

なるほど、理解いたしました。 id,classを追加したりするのは見た目を変えるためです。 cssを結構書く必要がありそうですが、やってみます。 ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問