PAGE TOP

サイドバーをある範囲内で固定してスクロールに追尾させるjQuery

サイドバーを追尾させる

レイアウトの基本として、2カラムなどでメインのコンテンツとサイドバーにその他のページへのリンクなどを配置することは多々有ります。

 

コンテンツが長くなった場合、サイドバーはスクロールで隠れてしまい、ページ遷移におけるユーザビリティの低下が起こります。

 

これをコンテンツの縦幅に合わせてスクロールに追尾するスクリプトはいかがでしょうか?
どんなにコンテンツが長くなってもサイドバーは固定で表示されており、いつでも違うページヘの遷移が可能になります。

 

デモページ │ SMILEWORKS(当サイト)

実装

HTMLファイルには、サイドバーの固定したい要素を用意
この例では、サイドバーのクラス「fixedmenu」を固定表示にします。

 

<div id="main">

<div id="content">
コンテンツ部分
</div><!--end content-->

<div id="side">
<div class="fixedmenu">
固定して表示したいもの
</div><!--end fixedmenu-->
</div><!--end side-->

</div><!--end main-->

 

次に、すでにjquery本体は読み込んであるものとして、
<head>内に以下のコードを外部ファイル化またはインラインで読み込みます。

 

(function(){
 $(function(){
 var fix = $('.fixedmenu'), //固定したいコンテンツ
 side = $('#side'), //サイドバーのID
 main = $('#main'), //固定する要素を収める範囲
 sideTop = side.offset().top;
 fixTop = fix.offset().top,
 mainTop = main.offset().top,
 w = $(window);
 
 var adjust = function(){
 fixTop = fix.css('position') === 'static' ? sideTop + fix.position().top : fixTop;
 var fixHeight = fix.outerHeight(true),
 mainHeight = main.outerHeight(),
 winTop = w.scrollTop();
 if(winTop + fixHeight > mainTop + mainHeight){
 fix.css({
 position: 'absolute',
 top: mainHeight - fixHeight
 });
 }else if(winTop >= fixTop){
 fix.css({
 position: 'fixed',
 top: 10
 });
 }else{
 fix.css('position', 'static');
 }
 }
 w.on('scroll', adjust);
 });
})(jQuery);

 

これで、親要素「#main」の範囲内で、固定要素「.fixedmenu」は常に固定して表示されます。
24行目に、上から何ピクセルの場所で固定という設定ができます。

 

ひとつご注意は、サイドバーの要素よりもコンテンツが短い場合、要素が上にはみ出てしまうというバグ(というか自然な現象)があります。
コンテンツの量はかならずサイドバーの固定要素より多くしてください。

 

簡単ながら実用性の高いレイアウトのテクニックだと思います。


同じカテゴリのおすすめ記事

  • カテゴリー

  • 最近の投稿

  •