Stinger5でのスクロール追随機能をなおす方法

以前のサイトで使っていたWordpressテーマ、Stinger5はとても優秀で設定も簡単にできました。

スクロールに追随するサイドバーを設定することもできるのですが、そのままの状態では上手く働きませんでした。

上へ

Sponsored link

スクロール表示がおかしい

どのように駄目だったかというと、

  1. スクロールダウンの途中までは正常に動いている
  2. 追随させたい部分が画面の上まで来ると、ジャンプして外に出てしまう
  3. 固定される位置が、固定されて欲しい場所よりもだいぶ上になってしまっている
  4. 追随部分が十分大きい場合には、下の方は追随してくれる
  5. 必要な数よりもたくさんのウィジェットを追随させれば、上手く表示することは(一応)できる

のですが、なんだかスマートではないので、根本的に改善する方法を探しました。

scroll.jsを改訂

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

  • stinger3ではbase.js
  • stinger5ではjs/scroll.js

を更新することで回避できるようになります。

scroll.jsの中身

標準状態のscroll.jsはこんなのでした。Wordpressのダッシュボード上からは編集できないので、FTPを使ってアクセスする必要があります。

/*--------------------------------
広告のフロート
-------------------------------*/
(function(jquery) {
     jquery(document).ready(function() {
          /*
          Ads Sidewinder
          by Hamachiya2. http://d.hatena.ne.jp/Hamachiya2/20120820/adsense_sidewinder
          */
          var main = jQuery('main'); // メインカラムのID
          var side = jQuery('#side aside'); // サイドバーのID
          var wrapper = jQuery('#scrollad'); // 広告を包む要素のID

if (main.length === 0 || side.length === 0 || wrapper.length === 0) {
return;
}

          var w = jquery(window);
          var wrapperHeight = wrapper.outerHeight();
          var wrapperTop = wrapper.offset().top;
          var sideLeft = side.offset().left;

          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() {
               sideHeight = side.outerHeight();
               mainHeight = main.outerHeight();
               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: '',
                         bottom: winHeight - wrapperHeight,
                         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 = w.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
                    });
               }
          };
          w.on('load', scrollAdjust);
          w.on('scroll', scrollAdjust);
          w.on('resize', resizeAdjust);
     });
})(jQuery);

これを、前述ブログサイトの改訂部分を適用して、

/*--------------------------------
広告のフロート
-------------------------------*/
(function(jquery) {
     jquery(document).ready(function() {
          /*
          Ads Sidewinder
          by Hamachiya2. http://d.hatena.ne.jp/Hamachiya2/20120820/adsense_sidewinder
          */
          var main = jQuery('main'); // メインカラムのID
          var side = jQuery('#side aside'); // サイドバーのID
          var wrapper = jQuery('#scrollad'); // 広告を包む要素のID

if (main.length === 0 || side.length === 0 || wrapper.length === 0) {
return;
}

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 resizeAdjust = function() {
               side.css({
                    position:'static',
                    marginTop: sideMargin.top,
                    marginRight: sideMargin.right,
                    marginBottom: sideMargin.bottom,
                    marginLeft: sideMargin.left
               });
               sideLeft = side.offset().left;
               winLeft = w.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
                    });
               }
          };
          w.on('load', scrollAdjust);
          w.on('scroll', scrollAdjust);
          w.on('resize', resizeAdjust);
     });
})(jQuery);

にしました。有用なソースコードを公開してくださった先人に感謝です。

なぜか働かなくなった

設定した直後はこれでスクロール追随できるようになりました。が、翌日見てみたら固定できなくなっていました。

scroll.jsを読み込んでいるPHPの後に他の動作を入れてみるとそちらは動きます。デバッグ用にscroll.jsに文字を出力させるようにしてみたのですが出力されません。scroll.jsが読み込まれていないのか、何なのか分かりませんが・・・。

追随スクロールを作るプラグインを入れて解決することができました。

Sponsored link
Spinsored link

シェアする

  • このエントリーをはてなブックマークに追加

フォローする