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

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

フッターに被らないスクロール追尾型のサイドバーを実装する方法
  • シェアしてね♪
  • このエントリーをはてなブックマークに追加

  • 広告主様募集中
    ワンコインで広告掲載してみませんか?
  • このエントリーをはてなブックマークに追加

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

スポンサードリンク

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

スクロールに追尾するサイドバーは、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;)に固定されスクロールに追尾します。

あとがき

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

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

この記事が気に入ったら
いいね!してね♪

Twitter で
スポンサードリンク

関連記事

コメントを残す

メールアドレスが公開されることはありません。