ワードプレスの有料テーマ「Jstork」。
１万円で購入し当ブログで僕に適用しているのですが、「サイドバーのスクロール追従箇所が上手く機能しない」というバグに遭遇しました。
「Jstork サイドバー バグ」
「Jstork スクロール固定 ズレる」
「Jstork スクロール追従 ズレる」
などのワードで検索される方におすすめです。
バグの内容
PC版右側のサイドバーには、「人気記事」というコンテンツが表示されていると思いますが、ここを「スクロール領域」に設定しています。
だから、スクロールして「人気記事」という項目が画面上部に到達したら、そのままFixされスクロール固定となるはずです。
しかし、ちょうど上部で固定されるはずなのに、ちょっと上部に入り込んで固定されてしまいます。
つまり、「人気記事」のタイトルは画面外に行ってしまい、そのコンテンツの途中から始まってしまうということです。
Jstorkテーマを導入した時点でこの問題が発生していました。
僕の場合は、この「スクロール追従エリア」に「人気記事」が表示されるようにしてたんですが、バグ発生によって見事に見出しの「人気記事」が上にズレこんでます。
なんでや。
原因
原因は「Google Adsenseの自動広告」でした。
自動広告が始まったのはつい最近のことです。
本来アドセンス広告は、挿入したい箇所に自分でコードを貼り付けて表示させる必要がありました。
しかし自動広告を導入すると、Googleのアルゴリズムによって最適だと判断された箇所にも自動で何かしらの広告が表示されるようになります。
今回のバグは、その兼ね合いで発生したバグのようです。
自動広告を導入したら、サイドバーにも広告が表示されるようになりました。
そしてそれは、ページによってあったり無かったりします。
で、表示された場合はバグが発生します。
これは、サイドバーに広告が表示された場合、Jstork君が、「そんな後付けで表示される広告にまで対処できないよ！」と言っているからなんですね。
解決法
jstorkテーマフォルダの中にある「sidebar.php」の19行目付近
$(document).ready(function() {
を
$(window).load(function() {
に書き換えてあげると解決します。
解決する理由
$(document).ready
というのは、「HTMLが全部読み込まれてからこのプログラム（スクロール追従）を発動するよ」という意味です。
しかし「$(document).ready」には、「画像」は含まれません。
対して
$(window).load(function() {
は、
「画像含む全てのHTMLが読み込まれてから発動するよ」という宣言なので、自動広告（ほぼ画像だし）が読み込まれてから発動するんです。
まとめ：もっと良い解決策があるかも
いかんせんjquery初心者なので、もっと他に良い解決策があるかもです。
もしくはJstork開発者がバージョンアップで対策してくれるかも。
もし公式がバージョンアップ版をリリースしたら、素直にそちらを反映させましょう。
