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

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

ただいまの
回答率

90.49%

  • WordPress

    7231questions

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

  • jQuery

    6720questions

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

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

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 861

ebihurai3hon

score 1

前提・実現したいこと

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

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

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

問題発生までの過程

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

window.onload = function(){
      //サイドバー処理
      var screen_width = jQuery(window).width(); //画面横幅取得
      var border = 1129; //サイドバー有無の境目

      var sideWrap = jQuery(".side"); //サイドバーの外枠

      if(screen_width > border){ //PCの場合(サイドバー追尾処理)
            var mainArea = jQuery(".main"); //メインコンテンツ
            var sideArea = jQuery(".side_inner"); //サイドバー中身

            var wd = jQuery(window); //ウィンドウ自体

            //メインとサイドの高さを比べる       
            var mainH = mainArea.height();
            var sideH = sideWrap.height();

            if(sideH < mainH) { //メインの方が高ければ色々処理する

                  //サイドバーの外枠をメインと同じ高さにしてrelaltiveに(#sideをポジションで上や下に固定するため)
                  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": "0"}); 

                              }else if(wd.scrollTop() + wd.height() >= breakPoint){ //固定解除位置を超えた時
                                    sideArea.css({"position": "absolute", "bottom": "-30px"});

                              } else { //その他、上に戻った時
                                    sideArea.css("position", "relative");

                              }

                        }else{ //サイドメニューが画面より小さい場合

                              var sideBtm = wd.scrollTop() + sideArea.height(); //サイドメニューの終点

                              if(mainArea.offset().top < wd.scrollTop() && sideBtm < breakPoint){ //固定範囲内
                                    sideArea.css({"position": "fixed", "top": "0"});

                              }else if(sideBtm >= breakPoint){ //固定解除位置を超えた時

                                    //サイドバー固定場所(bottom指定すると不具合が出るのでtopからの固定位置を算出する)
                                    var fixedSide = mainH - sideH;

                                    sideArea.css({"position": "absolute", "top": fixedSide});

                              } else {
                                    sideArea.css("position", "relative");
                              }
                        }


                  });
            }
      }else{ //PC以外の場合(サイドバースライドイン処理)
            jQuery(function(){
                  sideWrap.addClass("drawer-nav");
                  sideWrap.css("display", "block");//読み込み終了までnone
            });
            jQuery('.drawer').drawer();
      }    

}


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

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


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

しかし、

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

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

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

 jQuery(window).on('load resize', function(){
        var screen_width = jQuery(window).width();
        var border = 1129;

      var sideWrap = jQuery(".side"); //サイドバーの外枠
      var mainArea = jQuery(".main"); //メインコンテンツ
      var sideArea = jQuery(".side_inner"); //サイドバー中身

      if(screen_width > border){ //PCの場合(サイドバー追尾処理)
          sideWrap.css("display", "");
          sideWrap.removeClass("drawer-nav");
          sideArea.css("transition-timing-function", "");
          sideArea.css("transition-duration", "");
          sideArea.css("transform", "");

            var wd = jQuery(window); //ウィンドウ自体

            //メインとサイドの高さを比べる       
            var mainH = mainArea.height();
            var sideH = sideWrap.height();

            if(sideH < mainH) { //メインの方が高ければ色々処理する

                  //サイドバーの外枠をメインと同じ高さにしてrelaltiveに(#sideをポジションで上や下に固定するため)
                  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": "0"}); 

                              }else if(wd.scrollTop() + wd.height() >= breakPoint){ //固定解除位置を超えた時
                                    sideArea.css({"position": "absolute", "bottom": "-30px"});

                              } else { //その他、上に戻った時
                                    sideArea.css("position", "relative");

                              }

                        }else{ //サイドメニューが画面より小さい場合

                              var sideBtm = wd.scrollTop() + sideArea.height(); //サイドメニューの終点

                              if(mainArea.offset().top < wd.scrollTop() && sideBtm < breakPoint){ //固定範囲内
                                    sideArea.css({"position": "fixed", "top": "0"});

                              }else if(sideBtm >= breakPoint){ //固定解除位置を超えた時

                                    //サイドバー固定場所(bottom指定すると不具合が出るのでtopからの固定位置を算出する)
                                    var fixedSide = mainH - sideH;

                                    sideArea.css({"position": "absolute", "top": fixedSide});

                              } else {
                                    sideArea.css("position", "relative");
                              }
                        }


                  });
            }
      }
      else{ //PC以外の場合(サイドバースライドイン処理)
            jQuery(function(){
                sideWrap.css("position", "");
                sideWrap.css("height", "");
                  sideArea.css("bottom", "");
                  sideWrap.addClass("drawer-nav");
                  sideWrap.css("display", "block");//読み込み終了までnone
                sideArea.css("position", "");
            });
      }    
jQuery('.drawer').drawer();
});
<html lang="ja">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" id="drawer_css-css" href="/drawer_custom.css" type="text/css" media="all">
    <script src="/jquery-1.12.3.min.js"></script>
    <script type="text/javascript" src="/jquery-migrate.min.js?ver=1.4.1"></script>
    <script type="text/javascript" src="/script.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/iScroll/5.1.3/iscroll.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.1.0/js/drawer.min.js"></script>
</head>

<body class="drawer drawer--left drawer-close" style="overflow: auto;">
    <div class="main_side">
        <div class="main">
            <div class="header"></div>
            <div class="main_inner"> </div>
            <!-- .main_inner -->
        </div>
        <!-- .main -->
        <!-- サイドバー -->
        <div class="side sidebar_color drawer-nav" role="navigation" style="display: block;">
            <div class="side_inner" style="position: fixed; bottom: 0px;">
                <div class="box"></div>
                <div class="box"></div>
                <div class="box"></div>
            </div>
            <!-- .side_inner -->
        </div>
        <!-- .side -->
    </div>
    <!-- .main_side -->
</body>

</html>

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

jQuery(document).ready(function(){
      var timer = false;
    jQuery(window).on("load resize", ReLayout);
    function ReLayout() { … }    
       if (event.type == 'resize') {
            if (timer !== false) {
                clearTimeout(timer);
            }
            timer = setTimeout(function() {
            y = document.documentElement.scrollTop || document.body.scrollTop;
            location.reload();
            window.scroll( 0, y); 
            }, 200);
        }
}
     });
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    2017/03/09 08:28

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

    キャンセル

  • ebihurai3hon

    2017/03/09 09:04

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

    キャンセル

回答 1

checkベストアンサー

+1

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/03/09 04:37

    大変有用なアドバイスありがとうございます。

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

    キャンセル

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

  • ただいまの回答率 90.49%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • WordPress

    7231questions

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

  • jQuery

    6720questions

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