ScrollFollow.jsについて

久々の投稿．

さて，scrollfollow.jsというJavaScriptのライブラリを使って

ページスクロールに追従するメニューを作成していました．

このライブラリはjQueryを必要としているわけですが，そのバージョンが古いのです．

確認してみるとソースコード内に次のような記述があります．

 * @version 0.4.0
 * 
 * @requires jquery.js (tested with 1.2.6)
 * @requires ui.core.js (tested with 1.5.2)

これが意味するところはjquery.js ver 1.2.6でしか動作確認していませんよということ．

実際，この文面を書いている段階でjquery.jsのバージョンはVer.2.0になろうかとしているところ．

 

いろいろなページを見てると最新のjQueryで動作させるために必要なハックが記述されています．

以下のURLを参考に，scrollfollow.js ver.0.4.0を改変してみました．

58行目，59行目

var parentHeight = parseInt( box.cont.attr( 'offsetHeight' ) );
var boxHeight = parseInt( box.attr( 'offsetHeight' ) + ( parseInt( box.css( 'marginTop' ) ) || 0 ) + ( parseInt( box.css( 'marginBottom' ) ) || 0 ) );

を

var parentHeight = parseInt( box.cont.outerHeight() );
var boxHeight = parseInt( box.outerHeight() + ( parseInt( box.css( 'marginTop' ) ) || 0 ) + ( parseInt( box.css( 'marginBottom' ) ) || 0 ) );

に変更（最新のjQueryでも動作させるため）

98行目

top: aniTop

を

top: Math.max( pageScroll - parseInt( box.parent().offset().top) + 10, 0)

に変更（ブラウザ間でのスクロール位置調整のため）

98行目の変更は以下のリンク先に詳しい話があるのでここでは割愛．

簡単に話せば，ブラウザごとにスクロール時の挙動が異なるので，それを合わせようとする内容．

参考URL

jquery.scrollfollow.jsが動かない＠w32.jp WeBlog

http://blog.w32.jp/2012/11/jqueryscrollfollowjs.html

scrollfollowのスクロール位置がブラウザによって違う＠w32.jp WeBlog

http://blog.w32.jp/2012/11/scrollfollow.html

 

 

で，本題はここから．

上記2点の変更を行ったところ，微妙に解決していない問題があり，それを修正しました．

その問題とは「（ヘッダ，）フッタを含むページデザインにおいてフッタ部分を突き破ってスクロールされてしまう」という問題です．

スクロールメニューがはみ出てしまうのです．

とりあえず，自分が行ったHTML環境を示します．（スタイルシートなどは書いていませんが適当に補完してやってください．あとで追記します）

<div>
 <div id="header">header</div>

 <div>
  <div id="main">
   main_contents
  </div>

  <div id="side_area">
   <div id="menu">
    menu
   </div>
  </div>

 </div>

 <div id="footer">footer</div>
</div>

このとき，div#menuが上下に移動するメニューとなります．

その親要素であるdiv#side_areaはdiv#menuが移動できる範囲を意味します．

このHTMLの場合，見た目上，div#menuがdiv#footerを突き抜けて，延々とブラウザの下の方までスクロールができてしまうのです．

この不具合は，本家側では起こらないものですが，上記の改変を行うことでメニューエリアが無限の旅にでかけてしまいます．

これはうれしくないので更にコードを改変します．

 

98行目

top: Math.max( pageScroll - parseInt( box.parent().offset().top) + 10, 0)

を

top: Math.min( Math.max( pageScroll - parseInt( box.parent().offset().top) + 10, 0), parseInt( box.parent().outerHeight()) - boxHeight )

に変更

 

このコードを使う場合，前提として移動するメニュー（div#menu）の親要素(div#side_area)の高さが確定している必要があります．さらに言えば，div#mainとdiv#side_areaの高さが同じである必要もあります（この辺もまとめてscrollfollow.jsに組み込もうかな）．

以上の条件を満たす必要がありますが，この改変によりメニューが行方不明にならなくなります．

要望があれば高さを同じにするコードも公開します．

 

—————————-追記 2013/12/4———————————-

この記事のリンクが2chのjQueryスレに載ってた．

なんでもresizeイベントは発火するけどscrollイベントが発火しないとのころ．

前半の改変は多くの方がハックしている箇所なので自分的には何も言うことがないけど，

後半の改変はＨＴＭＬコーディングの状況によるハックと思います．

こっちでコメントいただければ何なりと対応できると思いますがね．