完全版！STINGER PLUSでスクロールしたら追尾サイドバーが消える問題の修復
私はこのブログのテーマにSTINGER PLUSを使っています。
もう無料配布は停止してしまったようですが、、無料で使えてかなり高機能なテーマで、いつも作者様に感謝しています。
ただ一方で、STINGERにはどうやらかなり前のバージョンから、「記事を下にスクロールした時にサイドバーが消える」という問題がありました。
いろいろ検索しても正しい情報がなかなか出てきません。悪さをしているのはテーマ内のscroll.jsというJavaScriptファイルなのは分かっているのですが、「scroll.jsを消せ」という乱暴な解決法が出てきたりします。
scroll.jsの修正方法を教えているサイトもいくつかありますが、、STINGER PLUSに対応していなかったり、エラーがあるコードをそのまま公開しているサイトもあったりしました。
この問題に終止符を打つべく、完全版コードを公開します。
参考にしたのはこのサイト
今回最も有用な情報を提供してくれたのは【STINGER5】サイドバーのスクロール広告が消える！ズレる時の対処法と解説【WordPress】です。
ただ、この記事の内容はSTINGER5向けだったので、これをSTINGER PLUS流に書き換えたのがこちらのコードです。
/*--------------------------------
広告のフロート
-------------------------------*/
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 sideHeight = $side.outerHeight();
var sideTop = $side.offset().top;
var sideLeft = $side.offset().left;
var sideMargin = {
top: $side.css('margin-top') || 0,
right: $side.css('margin-right') || 0,
bottom: $side.css('margin-bottom') || 0,
left: $side.css('margin-left') || 0
};
var winLeft;
var pos;
var scrollAdjust = function () {
// サイドバーかスクロール広告の高さが変わっていたら更新する
// 広告が浮いてる状態で高さが更新されるとwrapperTopにズレが発生する可能性あり
if (sideHeight != $side.outerHeight() || wrapperHeight != $wrapper.outerHeight()) {
sideHeight = $side.outerHeight();
wrapperHeight = $wrapper.outerHeight();
wrapperTop = $wrapper.offset().top;
}
var mainHeight = $main.outerHeight();
var mainAbs = $main.offset().top + mainHeight;
var winTop = $window.scrollTop();
var winHeight = $window.height();
winLeft = $window.scrollLeft();
// スクロール広告の頭が画面上部からはみ出そうで、メインコンテンツがサイドバーが長い=広告を浮かす必要がある
var nf = (winTop > wrapperTop) && (mainHeight > sideHeight) ? true : false;
// スクロール広告の頭からサイドバーが終わるまでの高さ
var wrapperTop2SideBottomHeight = sideHeight - (wrapperTop - sideTop);
/**
* 浮かす必要が無いならstaticでそのまま。
* 画面上部の高さ＋広告以下の高さを合わせて、コンテンツの高さを超えるならabsoluteで終端を揃える。
* それ以外はfixedで広告の頭を固定で浮かして表示する。
*/
pos = !nf ? 'static' : (winTop + wrapperTop2SideBottomHeight) > mainAbs ? 'absolute' : 'fixed';
if (pos === 'fixed') {
/*スクロール広告の下にコンテンツ置いても大丈夫なように上基準に変更
広告の頭が画面上部に合うように引っ張り上げる。
サイドバーが開始する高さまでは除去しないとずれる。*/
$side.css({
position: pos,
top: sideTop - wrapperTop,
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
});
// ずれた時の為に、通常の領域に戻った時に再調整する
wrapperTop = $wrapper.offset().top;
}
};
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);
}困っている方、ぜひお試しください！