完全版!STINGER PLUSでスクロールしたら追尾サイドバーが消える問題の修復

scroll.js

私はこのブログのテーマに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);
}

困っている方、ぜひお試しください!