フッターの位置まできたら止まるスクロールに追尾するサイドバーを実装する方法をご紹介いたします。
フッターに被らないスクロール追尾型のサイドバーを実装する方法
スクロールに追尾するサイドバーは、jQueryを使って実装します。
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script>$(function(){ var target = $("#sidebar"); var footer = $("#footer") var targetHeight = target.outerHeight(true); var targetTop = target.offset().top; $(window).scroll(function(){ var scrollTop = $(this).scrollTop(); if(scrollTop > targetTop){ var footerTop = footer.offset().top; if(scrollTop + targetHeight > footerTop){ customTopPosition = footerTop - (scrollTop + targetHeight) target.css({position: "fixed", top: customTopPosition + "px"}); } else { target.css({position: "fixed", top: "10px"}); } } else { target.css({position: "static", top: "auto"}); } });});</script> |
#sidebarはサイドバー、#footerはフッターのIDです。それぞれ環境に合わせて変更してください。
上記スクリプトでは、ページの上部(top:10px;)にサイドバーが固定されます。下部に固定したい場合は、以下のように記述します。
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script>$(function(){ var target = $("#sidebar"); var footer = $("#footer") var targetHeight = target.outerHeight(true); var targetTop = target.offset().top; $(window).scroll(function(){ var scrollTop = $(this).scrollTop(); if(scrollTop > targetTop){ var footerTop = footer.offset().top; if(scrollTop + targetHeight > footerTop){ customTopPosition = footerTop - (scrollTop + targetHeight) target.css({position: "fixed", top: customTopPosition + "px"}); } else { target.css({position: "fixed", bottom: "10px"}); } } else { target.css({position: "static", bottom: "auto"}); } });});</script> |
このように記述すれば、サイドバーが下部(bottom:10px;)に固定されスクロールに追尾します。
あとがき
以前、「スクロール追従型の広告をサイドバーに設置する方法」という記事を書きましたが、この方法だと追尾したサイドバーとフッターが重なってしまうことがありました。
上述した方法だと、フッターと被らずにサイドバーを追尾させることができますので、こちらの方が実用性はあるかと思います。