フッターに被らないスクロール追尾型のサイドバーを実装する方法

フッターの位置まできたら止まるスクロールに追尾するサイドバーを実装する方法をご紹介いたします。

フッターに被らないスクロール追尾型のサイドバーを実装する方法

スクロールに追尾するサイドバーは、jQueryを使って実装します。

<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;)にサイドバーが固定されます。下部に固定したい場合は、以下のように記述します。

<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;)に固定されスクロールに追尾します。

あとがき

以前、「スクロール追従型の広告をサイドバーに設置する方法」という記事を書きましたが、この方法だと追尾したサイドバーとフッターが重なってしまうことがありました。

上述した方法だと、フッターと被らずにサイドバーを追尾させることができますので、こちらの方が実用性はあるかと思います。