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

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

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

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

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

Q&A

1回答

5453閲覧

【jQuery】ウインドウサイズを替えたときの再計算

Hiroky

総合スコア6

jQuery

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

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

0グッド

0クリップ

投稿2017/05/09 00:51

編集2022/01/12 10:55

###前提・実現したいこと
HTML制作。サイドメニュー追従

下記ページを参考に、サイドメニューが特定条件で固定させるような処理を行っています。
http://hm-solution.jp/web/post3105.html

###発生している問題

現在下記URLで調整しています。
https://fukuoka.info/wp-content/themes/seventeen/a.html

参考ページの解説として、「ページが読み込まれた場合にメインとサイドの高さを比べ、条件に応じて処理を行う」と書かれています。

ページが読み込まれた場合はイメージ通りに動いてくれるのですが、ページ読み込み後、ウインドウサイズが変わった時、特に横幅が小さくなったときもサイド部分の固定処理が実行されてしまいます。

これをどうにかしたいです。

具体的には、
・トリガー条件にウインドウサイズが◯◯ピクセル(例えば800ピクセル以上)のときにサイド固定の処理をおこなう。◯◯ピクセル以下の際は行わない。
・ウインドウサイズが変わった場合も再計算
です。

###該当のソースコード

現在設定しているコードが下記です。

var timer = false; $(window).on('load resize', function(){ if (timer !== false) { clearTimeout(timer); } timer = setTimeout(function() { console.log('resized'); var w = $(window).width(); var x = 1000; if (w >= x) { var mainArea = $(".main"); var sideWrap = $(".side-wrap"); var sideArea = $(".side"); var wd = $(window); var mainH = mainArea.height(); var sideH = sideWrap.height(); if(sideH < mainH) { sideWrap.css({"height": mainH,"position": "relative"}); var sideOver = wd.height()-sideArea.height(); var starPoint = sideArea.offset().top + (-sideOver); var breakPoint = sideArea.offset().top + mainH; wd.scroll(function() { if(wd.height() < sideArea.height()){ if(starPoint < wd.scrollTop() && wd.scrollTop() + wd.height() < breakPoint){ sideArea.css({"position": "fixed", "bottom": "20px"}); }else if(wd.scrollTop() + wd.height() >= breakPoint){ sideArea.css({"position": "absolute", "bottom": "0"}); } else { sideArea.css("position", "static"); } }else{ var sideBtm = wd.scrollTop() + sideArea.height(); if(mainArea.offset().top < wd.scrollTop() && sideBtm < breakPoint){ sideArea.css({"position": "fixed", "top": "20px"}); }else if(sideBtm >= breakPoint){ var fixedSide = mainH - sideH; sideArea.css({"position": "absolute", "top": fixedSide}); } else { sideArea.css("position", "static"); } } }); } } }, 200); });

###試したこと
解決しようと
https://kadoppe.com/archives/2012/02/jquery-window-resize-event.html
https://teratail.com/questions/69215
http://bl6.jp/web/javascript/change-process-get-window-size/
あたりを参考に試してみましたが、うまくいきません。

よろしくお願いします。

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

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

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

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

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

guest

回答1

0

経験上、タイマー変数、リサイズイベント、処理メソッドは別にした方が、
コントロールもしやすいし、デバッグしやすいです。
本題の原因としてはおそらく、ウィンドウサイズが小さかった時に固定を解除するという処理がないからではないかと思います。
下記でいかがでしょう?

JavaScript

1$(function() { 2// 各ファイルが読み込まれたら実行 3 4// タイマー、毎回同じ大きさの変数をここで宣言 5var $resizeTimer = null, 6 $gX = 1000; 7 8$(window).load(function() { 9// ページ内の画像も含め全てが読み込まれたら実行 10 11// 毎回同じ変数は先に外で定義 12var mainArea = $(".main"), 13 sideWrap = $(".side-wrap"), 14 sideArea = $(".side"), 15 16 wd = $(window); 17 18// ページ大きさ変数をここで定義 19var $pageSize = {width: wd.width(), height: wd.height()}; 20 21 22var $resizeFunc = function(){ 23 // 上の変数を使ったリサイズ時の処理 24 25 var mainH = mainArea.height(); 26 var sideH = sideWrap.height(); 27 28 if ($pageSize.width >= $gX) { 29 30 if(sideH < mainH) { 31 sideWrap.css({"height": mainH,"position": "relative"}); 32 var sideOver = wd.height()-sideArea.height(); 33 var starPoint = sideArea.offset().top + (-sideOver); 34 var breakPoint = sideArea.offset().top + mainH; 35 36 wd.scroll(function() { 37 38 if ($pageSize.width >= $gX) { 39 40 if(wd.height() < sideArea.height()){ 41 if(starPoint < wd.scrollTop() && wd.scrollTop() + wd.height() < breakPoint){ 42 sideArea.css({"position": "fixed", "bottom": "20px"}); 43 }else if(wd.scrollTop() + wd.height() >= breakPoint){ 44 sideArea.css({"position": "absolute", "bottom": "0"}); 45 } else { 46 sideArea.css("position", "static"); 47 } 48 49 }else{ 50 var sideBtm = wd.scrollTop() + sideArea.height(); 51 52 if(mainArea.offset().top < wd.scrollTop() && sideBtm < breakPoint){ 53 sideArea.css({"position": "fixed", "top": "20px"}); 54 }else if(sideBtm >= breakPoint){ 55 56 var fixedSide = mainH - sideH; 57 58 sideArea.css({"position": "absolute", "top": fixedSide}); 59 60 } else { 61 sideArea.css("position", "static"); 62 } 63 } 64 65 } 66 67 }); 68 } 69 } else { 70 // ウィンドウサイズが小さかった時に固定解除 71 $resetFunc(); 72 } 73}; 74 75var $resetFunc = function(){ 76 sideArea.css("position", "static"); 77 sideWrap.css('height', 'auto'); 78} 79 80//ウィンドウサイズ変更を受け取る 81$(window).on('resize', function() { 82 // リサイズ時なので、変数の中身変更 83 $pageSize = {width: wd.width(), height: wd.height()}; 84 85 if ($resizeTimer) { 86 clearTimeout($resizeTimer); 87 } 88 89 $resizeTimer = setTimeout(function(){ 90 $resizeFunc(); 91 }, 10); 92}); 93 94// ページ読み込み時に、リサイズ関数の初期実行 95$resizeFunc(); 96 97 98}); 99});

投稿2017/05/09 02:15

編集2017/05/11 04:24
miyabi_takatsuk

総合スコア9528

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

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

Hiroky

2017/05/09 06:52

回答ありがとうございます。早速調整してみたのですが、うまく固定解除となりませんでした。。。もう少しお知恵をお貸し下さい。下記が教えて頂いたコードを使った動作です。 https://fukuoka.info/wp-content/themes/seventeen/b.html
miyabi_takatsuk

2017/05/11 05:20 編集

回答が遅くなってすみません。 スクロールイベント内で、再度固定処理が行われていたのが原因だったようです。 スクロールイベント内でも、ウィンドウサイズ比較の条件式を追加しました。 また、固定解除処理を、外部に移動、サイドバーの高さが、適用されっぱになるのも、 解除されるようにしています。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

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

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問