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

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

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

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

jQuery

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

Q&A

解決済

1回答

2928閲覧

drawer.jsを使ったWordPressのサイトのレスポンシブ化が上手くいきません

ebihurai3hon

総合スコア7

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

jQuery

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

0グッド

0クリップ

投稿2017/03/07 23:43

編集2017/03/09 00:01

###前提・実現したいこと

・疑問点:意図しないpositionが追加されてしまいます。

・Wordpressのテーマをレスポンシブにしようとしています。知識は初学者で、ソースコードをコピペして少し変えるということしか出来ない程度です。

・知識不足により見苦しい表現、説明不足があるかも知れませんが、ご教授のほどよろしくお願いします。

###問題発生までの過程

元のソース:script.js(抜粋)は以下の通りです。

js

1window.onload = function(){ 2 //サイドバー処理 3 var screen_width = jQuery(window).width(); //画面横幅取得 4 var border = 1129; //サイドバー有無の境目 5 6 var sideWrap = jQuery(".side"); //サイドバーの外枠 7 8 if(screen_width > border){ //PCの場合(サイドバー追尾処理) 9 var mainArea = jQuery(".main"); //メインコンテンツ 10 var sideArea = jQuery(".side_inner"); //サイドバー中身 11 12 var wd = jQuery(window); //ウィンドウ自体 13 14 //メインとサイドの高さを比べる 15 var mainH = mainArea.height(); 16 var sideH = sideWrap.height(); 17 18 if(sideH < mainH) { //メインの方が高ければ色々処理する 19 20 //サイドバーの外枠をメインと同じ高さにしてrelaltiveに(#sideをポジションで上や下に固定するため) 21 sideWrap.css({"height": mainH,"position": "relative"}); 22 23 //サイドバーがウィンドウよりいくらはみ出してるか 24 var sideOver = wd.height()-sideArea.height(); 25 26 //固定を開始する位置 = サイドバーの座標+はみ出す距離 27 var starPoint = sideArea.offset().top + (-sideOver); 28 29 //固定を解除する位置 = メインコンテンツの終点 30 var breakPoint = sideArea.offset().top + mainH; 31 32 wd.scroll(function() { //スクロール中の処理 33 34 if(wd.height() < sideArea.height()){ //サイドメニューが画面より大きい場合 35 if(starPoint < wd.scrollTop() && wd.scrollTop() + wd.height() < breakPoint){ //固定範囲内 36 sideArea.css({"position": "fixed", "bottom": "0"}); 37 38 }else if(wd.scrollTop() + wd.height() >= breakPoint){ //固定解除位置を超えた時 39 sideArea.css({"position": "absolute", "bottom": "-30px"}); 40 41 } else { //その他、上に戻った時 42 sideArea.css("position", "relative"); 43 44 } 45 46 }else{ //サイドメニューが画面より小さい場合 47 48 var sideBtm = wd.scrollTop() + sideArea.height(); //サイドメニューの終点 49 50 if(mainArea.offset().top < wd.scrollTop() && sideBtm < breakPoint){ //固定範囲内 51 sideArea.css({"position": "fixed", "top": "0"}); 52 53 }else if(sideBtm >= breakPoint){ //固定解除位置を超えた時 54 55 //サイドバー固定場所(bottom指定すると不具合が出るのでtopからの固定位置を算出する) 56 var fixedSide = mainH - sideH; 57 58 sideArea.css({"position": "absolute", "top": fixedSide}); 59 60 } else { 61 sideArea.css("position", "relative"); 62 } 63 } 64 65 66 }); 67 } 68 }else{ //PC以外の場合(サイドバースライドイン処理) 69 jQuery(function(){ 70 sideWrap.addClass("drawer-nav"); 71 sideWrap.css("display", "block");//読み込み終了までnone 72 }); 73 jQuery('.drawer').drawer(); 74 } 75 76} 77

まず、画面サイズを変更した時イベントを取得できるようにしました。
しかし、リサイズした時、リサイズ前のウィンドウサイズであった時のクラスが残っていたため、リサイズしてもハンガーメニューが上手く動きませんでした。
そこで、

js

1sideWrap.css("display", ""); 2sideWrap.removeClass("drawer-nav");

などを加えてリサイズ前のクラスを除去する事によって、レスポンシブ化しました。

しかし、

「ページを1129以上のウインドウサイズで表示」→「1129以下にリサイズ」→「本文をスクロールをする」

.side_innnerpositionが追加されてしまい、ハンガーメニューが表示されません。何故positionが追加されてしまうのでしょうか?

###問題の発生したソースコード

jQuery

1 jQuery(window).on('load resize', function(){ 2 var screen_width = jQuery(window).width(); 3 var border = 1129; 4 5 var sideWrap = jQuery(".side"); //サイドバーの外枠 6 var mainArea = jQuery(".main"); //メインコンテンツ 7 var sideArea = jQuery(".side_inner"); //サイドバー中身 8 9 if(screen_width > border){ //PCの場合(サイドバー追尾処理) 10 sideWrap.css("display", ""); 11 sideWrap.removeClass("drawer-nav"); 12 sideArea.css("transition-timing-function", ""); 13 sideArea.css("transition-duration", ""); 14 sideArea.css("transform", ""); 15 16 var wd = jQuery(window); //ウィンドウ自体 17 18 //メインとサイドの高さを比べる 19 var mainH = mainArea.height(); 20 var sideH = sideWrap.height(); 21 22 if(sideH < mainH) { //メインの方が高ければ色々処理する 23 24 //サイドバーの外枠をメインと同じ高さにしてrelaltiveに(#sideをポジションで上や下に固定するため) 25 sideWrap.css({"height": mainH,"position": "relative"}); 26 27 //サイドバーがウィンドウよりいくらはみ出してるか 28 var sideOver = wd.height()-sideArea.height(); 29 30 //固定を開始する位置 = サイドバーの座標+はみ出す距離 31 var starPoint = sideArea.offset().top + (-sideOver); 32 33 //固定を解除する位置 = メインコンテンツの終点 34 var breakPoint = sideArea.offset().top + mainH; 35 36 wd.scroll(function() { //スクロール中の処理 37 38 if(wd.height() < sideArea.height()){ //サイドメニューが画面より大きい場合 39 if(starPoint < wd.scrollTop() && wd.scrollTop() + wd.height() < breakPoint){ //固定範囲内 40 sideArea.css({"position": "fixed", "bottom": "0"}); 41 42 }else if(wd.scrollTop() + wd.height() >= breakPoint){ //固定解除位置を超えた時 43 sideArea.css({"position": "absolute", "bottom": "-30px"}); 44 45 } else { //その他、上に戻った時 46 sideArea.css("position", "relative"); 47 48 } 49 50 }else{ //サイドメニューが画面より小さい場合 51 52 var sideBtm = wd.scrollTop() + sideArea.height(); //サイドメニューの終点 53 54 if(mainArea.offset().top < wd.scrollTop() && sideBtm < breakPoint){ //固定範囲内 55 sideArea.css({"position": "fixed", "top": "0"}); 56 57 }else if(sideBtm >= breakPoint){ //固定解除位置を超えた時 58 59 //サイドバー固定場所(bottom指定すると不具合が出るのでtopからの固定位置を算出する) 60 var fixedSide = mainH - sideH; 61 62 sideArea.css({"position": "absolute", "top": fixedSide}); 63 64 } else { 65 sideArea.css("position", "relative"); 66 } 67 } 68 69 70 }); 71 } 72 } 73 else{ //PC以外の場合(サイドバースライドイン処理) 74 jQuery(function(){ 75 sideWrap.css("position", ""); 76 sideWrap.css("height", ""); 77 sideArea.css("bottom", ""); 78 sideWrap.addClass("drawer-nav"); 79 sideWrap.css("display", "block");//読み込み終了までnone 80 sideArea.css("position", ""); 81 }); 82 } 83jQuery('.drawer').drawer(); 84});

html

1<html lang="ja"> 2 3<head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width"> 6 <link rel="stylesheet" id="drawer_css-css" href="/drawer_custom.css" type="text/css" media="all"> 7 <script src="/jquery-1.12.3.min.js"></script> 8 <script type="text/javascript" src="/jquery-migrate.min.js?ver=1.4.1"></script> 9 <script type="text/javascript" src="/script.js"></script> 10 <script src="https://cdnjs.cloudflare.com/ajax/libs/iScroll/5.1.3/iscroll.min.js"></script> 11 <script src="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.1.0/js/drawer.min.js"></script> 12</head> 13 14<body class="drawer drawer--left drawer-close" style="overflow: auto;"> 15 <div class="main_side"> 16 <div class="main"> 17 <div class="header"></div> 18 <div class="main_inner"> </div> 19 <!-- .main_inner --> 20 </div> 21 <!-- .main --> 22 <!-- サイドバー --> 23 <div class="side sidebar_color drawer-nav" role="navigation" style="display: block;"> 24 <div class="side_inner" style="position: fixed; bottom: 0px;"> 25 <div class="box"></div> 26 <div class="box"></div> 27 <div class="box"></div> 28 </div> 29 <!-- .side_inner --> 30 </div> 31 <!-- .side --> 32 </div> 33 <!-- .main_side --> 34</body> 35 36</html>

###リサイズ時にスクロール位置を記録してリロードすることで問題を回避

javascript

1jQuery(document).ready(function(){ 2 var timer = false; 3 jQuery(window).on("load resize", ReLayout); 4 function ReLayout() {} 5 if (event.type == 'resize') { 6 if (timer !== false) { 7 clearTimeout(timer); 8 } 9 timer = setTimeout(function() { 10 y = document.documentElement.scrollTop || document.body.scrollTop; 11 location.reload(); 12 window.scroll( 0, y); 13 }, 200); 14 } 15} 16 });

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

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

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

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

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

kei344

2017/03/08 23:28

まだ質問が「受付中」になっていますが、どのように解決したのかを回答文に書き、「解決済」にされてはいかがでしょうか。
ebihurai3hon

2017/03/09 00:04

ご不快な思いをさせて申し訳ありません。ベストアンサーに選ばせていただいた上で、拙いながらも修正したコードを追記させて頂きました。この度はありがとうございました。
guest

回答1

0

ベストアンサー

とりあえず jQuery(window).on('load resize', function(){}) の中で wd.scroll(function(){})jQuery('.drawer').drawer(); を定義していますが、resizeイベントが起きるたびに新たにスクロールイベントが登録されます。

イベントの定義は可能な限りイベント内で行わないほうが問題が置きにくいと思います。

投稿2017/03/08 08:51

kei344

総合スコア69366

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

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

ebihurai3hon

2017/03/08 19:37

大変有用なアドバイスありがとうございます。 しかし、私の力では発生している問題を回避することが出来ませんでした。 今回は「リサイズ時にスクロール位置を記憶してリロードをする」ということでその場を凌ぐことにしました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問