広告フロートの動きがおかしい問題の回避方法

公開日 2014/07/06 更新日 2014/11/22

JavaScript jQuery PHP STINGER v3 STINGER v5 カスタマイズ

WordPressテーマSTINGERのサイドバーにある「スクロール広告用」は広告フロートの処理によってスクロールしてもブラウザ画面内に固定表示することができますが、自分の環境だとこの動きがおかしい問題がありました。
そしてこの問題は、Javascript部分の処理上、ある条件により起きる問題とわかりました。

Information

STINGERスクロール広告用の「広告フロート」に関するソースを見ると、先頭にクレジットがありSTINGERに限らず同様の広告フロートを活用する場合に本件に関連があります。

ここでは、その詳細と回避方法についてのカスタマイズのやり方をまとめます。

Contents

1 問題点
2 「スクロール広告用」の領域が綺麗に固定されない問題の原因
- 2.1 固定表示用JSファイルについて
3 回避方法
4 変更暦

問題点

サイドバーの「スクロール広告用」の固定表示領域が綺麗に表示できない問題について以下の現象となるようです。

「スクロール広告用」のウィジェットがブラウザの画面外にはみ出してからでないと固定されない
「スクロール広告用」のウィジェットがページ上部に行く前のスクロール途中であったとしても上部へ移動して固定表示に切り替わってしまう(綺麗にスクロールできない)
「スクロール広告用」のウィジェットが固定されるべきが消えてなくなる

2番目の現象は遭遇したことがないとイメージしにくいし、自分で書いておきながら言っていることがいまいちよく伝えられていませんが、結局のところ、今回はすべて同じ対策で回避ができることがわかりましたので、以降では特に現象の違いには言及せずまとめたいと思います。

「スクロール広告用」の領域が綺麗に固定されない問題の原因

問題の原因は、STINGER提供の以下のJavascriptファイル(以降、固定表示用JSファイル)がページ読み込み時のサイドバーの高さが確定する前に動作したためです。

STINGER v3の場合 : base.js
STINGER v5の場合 : js/scroll.js

この固定表示用JSファイルは「スクロール広告用」に指定したHTML要素をブラウザ画面内に固定して表示する機能を司っています。
なお「スクロール広告用」の固定表示機能に関して、V3とV5とでソースコードに変更がありませんでした。

「スクロール広告用」の固定表示について、初期化処理はだいたい次のような流れになります。

サイトのページが読み込まれjQueryライブラリの初期化が完了する。
jQueryの初期化が完了すると、固定表示用JSファイル内の初期化が実行される。
固定表示用JSファイルはサイドバーのページ内位置/幅/高さを計算して記憶、またスクロール時等のイベントを登録。
[現象発生時]固定表示用JSファイルの初期化完了後に、サイドバーの高さが変更される

STINGERは3番で登録したスクロール時等のイベント処理を活用することで、ブラウザのスクロール時にサイドバーの表示位置をブラウザ画面内になるように常に座標を修正することで実現しているようです。

ここで4番にある現象が起きる場合は、「スクロール広告用」の領域の座標を修正する際に、4番で変更された高さと3番で記憶している変更前の高さの食い違いから固定する位置がずれてしまうので、これが問題点に記載した現象につながっています。

私のページでは広告の読み込みが遅いためか、4番が3番のあとに起きやすくなっているようです。
さきほど触れたように、これまで遭遇したことがない人は、この4番が起きていなかったのではないでしょうか。

固定表示用JSファイルについて

固定表示用JSファイルの先頭部分には、以下のコメントが記載されています。

/*--------------------------------
広告のフロート
-------------------------------*/

(function($) {
    $(document).ready(function() {
        /*
        Ads Sidewinder
        by Hamachiya2. http://d.hatena.ne.jp/Hamachiya2/20120820/adsense_sidewinder
        */

/*--------------------------------

広告のフロート

-------------------------------*/

(function($) {

$(document).ready(function() {

Ads Sidewinder

by Hamachiya2. http://d.hatena.ne.jp/Hamachiya2/20120820/adsense_sidewinder

URL先のサイトがどうもこの広告フロート機能の提案元のようで、同様のソースが掲載されてます。
つまりSTINGERのスクロール広告用に関しては、上記サイトのモジュールを活用しているということで、本記事にある問題はSTINGERに限らず起き得るようです。

回避方法

固定表示用JSファイルに対して、次のソース差分に示す★箇所の修正をすることで回避することが可能です。
ポイントは「スクロール広告用」の領域の高さを示すwrapperに関する高さや位置の情報を、ページ読み込み時だけではなく、ページ読み込み後のサイドバーの高さに変更があっても追従できるように、スクロール時にその都度更新するようにしています。

一応このサイトでも、この修正を加えており、今は安定して固定できているようです。

var w = jquery(window);
//var wrapperHeight = wrapper.outerHeight();                              //★ 削除
var sideTop = side.offset().top;                                          //★ 追加
var wrapperTop = wrapper.offset().top;
var sideLeft = side.offset().left;
var wrapperOffset = sideTop - wrapperTop;                                 //★ 追加
：
var scrollAdjust = function() {
    var mainHeight = main.outerHeight();
    var sideHeight = side.outerHeight();
    if(wrapperOffset != side.offset().top - wrapper.offset().top){        //★ 追加
        wrapperTop += (wrapper.offset().top - wrapperTop);                //★ 追加
        wrapperOffset = side.offset().top - wrapper.offset().top;         //★ 追加
    }
    var wrapperHeight = sideHeight + wrapperOffset;                       //★ 追加
    mainAbs = main.offset().top + mainHeight;
    var winTop = w.scrollTop();
    winLeft = w.scrollLeft();
    //var winHeight = w.height();                                         //★ 削除
    var nf = (winTop > wrapperTop) && (mainHeight > sideHeight) ? true : false;
    pos = !nf ? 'static' : (winTop + wrapperHeight) > mainAbs ? 'absolute' : 'fixed';
    if (pos === 'fixed') {
        side.css({
            position: pos,
            top: wrapperOffset,                                           //★ 変更
            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 w = jquery(window);

//var wrapperHeight = wrapper.outerHeight(); //★ 削除

var sideTop = side.offset().top; //★ 追加

var wrapperTop = wrapper.offset().top;

var sideLeft = side.offset().left;

var wrapperOffset = sideTop - wrapperTop; //★ 追加

：

var scrollAdjust = function() {

var mainHeight = main.outerHeight();

var sideHeight = side.outerHeight();

if(wrapperOffset != side.offset().top - wrapper.offset().top){ //★ 追加

wrapperTop += (wrapper.offset().top - wrapperTop); //★ 追加

wrapperOffset = side.offset().top - wrapper.offset().top; //★ 追加

}

var wrapperHeight = sideHeight + wrapperOffset; //★ 追加

mainAbs = main.offset().top + mainHeight;

var winTop = w.scrollTop();

winLeft = w.scrollLeft();

//var winHeight = w.height(); //★ 削除

var nf = (winTop > wrapperTop) && (mainHeight > sideHeight) ? true : false;

pos = !nf ? 'static' : (winTop + wrapperHeight) > mainAbs ? 'absolute' : 'fixed';

if (pos === 'fixed') {

side.css({

position: pos,

top: wrapperOffset, //★ 変更

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; //★ 追加

}

};

固定表示用JSファイルは、一度パソコンにダウンロードして編集後にサーバーにアップロードする必要があります。
この時のアップロード先は、WordPressインストールフォルダを起点にして次の場所になります。

[WordPressインストールフォルダ] / wp-content / themes / stingerXverXXXXXXXX

1	[WordPressインストールフォルダ] / wp-content / themes / stingerXverXXXXXXXX

※ [XXXXXXXX]はSTINGERのバージョンを示すフォルダになっているかと思います。

脱線してしまいますが、
オリジナルのSTINGERは、window.scrollTop()でサイドバーが画面内にいるかという判定に使用しているのに対して、サイドバーの表示位置の修正にはwindow.height()の方を見ていました。
しかしながら、ここでの処理では参照するパラメータはどちらかに揃えたほうが見やすかったので、window.scrollTop()だけで判定と位置修正のどちらも達成するように修正しています。

変更暦

2014/7/6 初版
2014/7/13 jquery.exresize.jsによる監視処理を追加、影響範囲にSTINGERが活用しているぼくはまちちゃんのURLを追記
2014/7/14 jquery.exresize.jsはなくてもできそうだったので回避方法を変更
2014/9/29 STINGER v5でも同様の修正で対応できるので、表現を若干変更

Comment

Stinger5でのスクロール追随機能を改善する方法 | 初心者でもネットで収入より:

2015年06月16日 14:49

[…] 検索すると、同じ症状について解説されたウェブページがありました。メジャーなCMSのWordpress、人気が高いテーマのStinger5を使っているとウェブ上に情報が多くて助かります。 […]

返信