###前提・実現したいこと
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/
あたりを参考に試してみましたが、うまくいきません。
よろしくお願いします。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/05/09 06:52
2017/05/11 05:20 編集