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

2012年11月15日

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

参考にしたサイト

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

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

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

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

そもそもの大前提として、するすると動かしたい部分のスタイルに「relative」設定ができないとアウトです。
今回vicunaのテンプレートを利用したのですが、マルチカラムの3段組にした場合のサイドバーは元々「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>

$( ‘#<動かすBOXのスタイル名>’ ).scrollFollow(
container: ‘動かすBOXの入れ物のBOXのスタイル名>’

これで動くはずです(*´Д`)ウホッ

おまけ:縦長メニューでも使える版

縦長メニューでも使えるjQuery scroll follow “plus”公開 | 松下響の天輪返し

おまけ2:同じようなするする仕様の「Contained Sticky Scroll」

最初こっちでやりかけたのですが、導入うまくいかず・・・。
2011年によく記事が書かれているので、こちらの方が新しいプラグインではあるようです。次回また挑戦。

スクロールしてもついてくる要素を実現するjQueryプラグイン『jQuery Sticky Sidebar』 | IDEA*IDEA

スクロールした位置に付いてくるサイドバーを実装するjQueryプラグイン・Contained Sticky Scroll – かちびと.net

jQueryで常に所定の場所にサイドカラムを表示させるプラグイン「Contained Sticky Scroll」|skuare.net

スクロールするとついてくるサイドバーを実装する際に便利なjQueryプラグイン「Smart sticky floating box」:phpspot開発日誌

サイドバーがスクロールに合わせて移動するjQueryプラグイン | jQuery.lab

javascript

Posted by ponnao