wordpressのテーマのstingerplus+を使用しているが、リライトを含めて記事を読み返しているとふとサイドバーが消えることに気がついた。
最初は記事によって消えたり消えなかったりしていたのだが、気がつくとすべての記事が同じ症状になった。
Stinger Plus+をスクロールするとサイドバーが途中で消える原因の追究
下にスクロールすると消えるが上に上がると復活
説明通り。
ある一定の段階でふとサイドバーが消えてしまう。
はじめに書いたが、記事により消えたり消えなかったりしたので、どういうことか全くわからなかった。
一番下にインスタグラムを表示したのが原因かなぁ〜、ぐらいに思っていたがインスタグラムを非表示にしても問題が解決しない。
ここでようやくプログラム？という結論に。
知らずにサイドバーを固定すると固定する直前「カクッ」となる
stingerplusを少しずつカスタマイズしている。
このサイドバーが途中で消える症状のままサイドバーを追尾機能をためしてみたら、固定される直前で「カクッ」となって固定される。
上に戻ると固定が解ける直前もカクッという感じで元に戻る。
だんだん気持ちが悪くなってきたので、解決方法を模索。
対処方法
scroll.jsを消す
scroll.js自体を消してしまうという対処方法を見かけた。
実際に消すと正常に動いた。
scroll.jsを修正する
でもなんか味気ない感じがしたので、保存しておいたscroll.jsを元に戻して、修正することにした。
最後に紹介するが、参考にしたサイトはstinger5の修正方法。
Stinger Plus+を修正する場合もほぼ同じように修正した。
サイドバーを長めに設定する
自分が思いついた一番邪道な解決方法だと思う。メインよりサイドバーが長くなるように設定すると、消える現象がなくなる。
かなりカッコ悪い(ｰ ｰ;)
scroll.jsの修正方法
プログラムの修正方法
さくらインターネットのサーバー設定より上記の「ファイルマネージャー」をクリックしてFTPにはいる。
[wordpress]/wp-content/themes/stingerplus/js/scroll.js
よりファイルを編集する。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 | /*-------------------------------- 広告のフロート -------------------------------*/ if( window.matchMedia('(max-width:781px)').matches ){ //780以下の時の処理 }else{ //780以上の時の処理 ;(function ($) { 'use strict'; $(function () { var $main = $('main'); // メインカラムのID var $side = $('#side aside'); // サイドバーのID var $wrapper = $('#scrollad'); // 広告を包む要素のID if ($main.length === 0 || $side.length === 0 || $wrapper.length === 0) { return; } var $window = $(window); var wrapperHeight = $wrapper.outerHeight(); var wrapperTop = $wrapper.offset().top; var sideLeft = $side.offset().left; var sideTop = side.offset().top; //追加 var sideMargin = { top: $side.css('margin-top') ? $side.css('margin-top') : 0, right: $side.css('margin-right') ? $side.css('margin-right') : 0, bottom: $side.css('margin-bottom') ? $side.css('margin-bottom') : 0, left: $side.css('margin-left') ? $side.css('margin-left') : 0 }; var winLeft; var pos; var scrollAdjust = function () { var sideHeight = $side.outerHeight(); var mainHeight = $main.outerHeight(); var mainAbs = $main.offset().top + mainHeight; var winTop = $window.scrollTop(); var winHeight = $window.height(); var nf = (winTop > wrapperTop) && (mainHeight > sideHeight) ? true : false; winLeft = $window.scrollLeft(); pos = !nf ? 'static' : (winTop + wrapperHeight) > mainAbs ? 'absolute' : 'fixed'; if (pos === 'fixed') { $side.css({ position: pos, top: -sideHeight + winHeight, //変更 bottom: '', //変更 left: sideLeft - winLeft, margin: 0 }); } else if (pos === 'absolute') { $side.css({ position: pos, top: mainAbs - sideHeight, bottom: '', left: sideLeft, margin: 0 }); } else { $side.css({ position: pos, marginTop: sideMargin.top, marginRight: sideMargin.right, marginBottom: sideMargin.bottom, marginLeft: sideMargin.left }); } }; var resizeAdjust = function () { $side.css({ position: 'static', marginTop: sideMargin.top, marginRight: sideMargin.right, marginBottom: sideMargin.bottom, marginLeft: sideMargin.left }); sideLeft = $side.offset().left; winLeft = $window.scrollLeft(); if (pos === 'fixed') { $side.css({ position: pos, left: sideLeft - winLeft, margin: 0 }); } else if (pos === 'absolute') { $side.css({ position: pos, left: sideLeft, margin: 0 }); } }; scrollAdjust(); $window.on('scroll', scrollAdjust); $window.on('resize', function () { scrollAdjust(); resizeAdjust(); }); }); })(jQuery); } |
24行目 var sideTop = side.offset().top; //追加
50行目 top: -sideHeight + winHeight, //変更
51行目 bottom: '', //変更
変更場所はこの3つのみ。
scroll.jsを消すのと同じくらい簡単。
まとめ
下記サイトを参考にさせてもらった。
根本は同じ。