［JS覚書］JQueryでサイドバーをするするしたいので「jquery.scrollfollow.js」を使ったよ。

2012年11月13日2012年11月15日

この立川あにきゃんのページを見て、今作ってるページもサイドメニューが少なめで、これがあったら便利じゃん！と実装してみました。

参考にしたサイト

スクロールに合わせて特定要素をスクロール-jquery.scrollfollow.js: かい坊のブログ

スクロールに合わせて特定要素をスクロール「jquery.scrollfollow.js」 | immature design

jQuery Scroll Follow｜設置サンプル
この設置サンプルはeasing.jsなどは使っていない簡易版のようです。

するする動かしたい部分に「relative」設定をしてもページが崩れないのが大前提！

そもそもの大前提として、するすると動かしたい部分のスタイルに「relative」設定ができないとアウトです。
今回vicunaのテンプレートを利用したのですが、マルチカラムの３段組にした場合のサイドバーは元々「absolute」設定だったので、その設定のトップページだけ実装できませんでした。別の手を考えねば。

jsファイルの入手

ちょっと古めのスクリプトだったので、公式ページでもリンク切れもあって、全部入手するのがちょっと大変だったのですが！

いちお自分が入手したページへのリンクにつなげましたが、動作は保証しかねます。
jquery.scrollfollow.js（右上のダウンロードボタン）
ui.core.js
jquery.easing.js
jquery.cookie.js

尚、バージョン数字がファイル名に入ってるものは数字をとって使用してます。

jquery.scrollFollow.jsを新しいバージョンのjquery用に修正

大概の人はすでにJqueryライブラリへのリンクは元々入ってると思うんですが、jquery.scrollFollow.jsはだいぶ前のライブラリ用に作られたらしく、新しめのバージョンで動かそうとすると「jquery.scrollFollow.js」へのリンク行へのエラーがでます。

メッセージ: 引数が無効です。
ライン: 18
文字: 20286
コード: 0
URI: http://hogehoge.com/wp/js/libs/jquery-1.6.2.min.js?ver=1.0

このページの下部に注目！

スクロールに合わせて特定要素をスクロール-jquery.scrollfollow.js: かい坊のブログ

ところで、この”jquery.scrollfollow.js”はデフォルトでjQuery Scroll FollowでダウンロードしたjQuery(jQuery.js)が使われている。
バージョンはVer.1.2.6という古いものだ。
これを最新のバージョンで動かそうと思えば、以下のような改造が必要だ。

自分の場合は、jquery.scrollfollow.jsの77行めあたりを以下のように修正すればOKでした。1.6.2でも動きました。

var parentTop =  parseInt( box.cont.attr('offsetHeight') );
var parentHeight = parseInt( box.attr('offsetHeight') +

↓　↓　↓

var parentHeight = parseInt( box.cont.outerHeight() );
var parentHeight = parseInt( box.outerHeight() +

function.phpに「wp_enqueue_script」でJSリンクを記述（Wordpressの場合）

自分は以下の内容をfunction.phpに記述しました。

wp_enqueue_script('ui.core.js','/js/ui.core.js', array(), '1.0' ,true);
wp_enqueue_script('jquery.easing.js','/js/jquery.easing.js', array(), '1.0' ,true);
wp_enqueue_script('jquery.cookie.js','/js/jquery.cookie.js', array(), '1.0' ,true);
wp_enqueue_script('jquery.scrollfollow.js','/js/jquery.scrollFollow.js', array(), '1.0' ,true);

ちなみに、scrollFollow.jsのファイル名の大文字「F」でひっかかりましたorz 注意。

フッターにスクリプトを記述

<script type="text/javascript">
    $( document ).ready( function ()
        {
            $( '#utilities' ).scrollFollow(
                {
                    speed: 1000,
                    offset: 0,
                    container: 'main'
                }
            );
        }
    );
</script>