スクロール後のサイドバーエリアの格好悪さをなんとかしたい

リニューアルからシンプルな2カラムにしてから非常に気になってたことが解決しました。
それがなにかっていうと、
サイドバー下部の空白!!
です!!
たまに長い記事を書いたりするとどうしてもサイドバーが本文より短いためにフッターに達するまでず~~っとサイドバーの下は空白になっちゃうわけです。
それはなんだかもったいない!
と思うのです。
記事はそれぞれ長さが違うのでそれに合わせてサイドバーの内容も増やせればいいのですけど、それはちょっとナンセンスですよね。
そんな問題を解決する方法はいくつかありますけど、今回は
「サイドバーの下が表示されたらそこでサイドバーを固定する」
という方法を取ってみることにしました。
で、検索して見つけたのがこの記事。
prasm | jQueryでフッターに重ならずに「空いた領域をフルに使い切る追尾型サイドバー」を実装する方法
ナイスじゃないですか~♪ そう!これですよこれ!
詳しい内容はprasmさんの記事をみてくださいね。
記事をじっくり読みつつ、コードをペタリ(もちろん自分の環境にあわせて)。
できました
ほんともうステキです♡
これでうちの貧弱なサイドバーも少しは見てもらえるようになるのではないでしょうかw
スクロール終了後に動くように変更してみた
javascriptとかにはめっぽう弱いのですが、これだとスクロール中ずっとサイドバーの位置やらなんやらを追い続けているような気がしました。
それって負荷ってやつではないかと。。。
そこで、スクロールが終わった直後に動くようにしてみました。
$(function(){ var contentHeight = $("html, body").height(); var windowHeight = $(window).height(); var target = $("#fix-box"); var targetHeight = target.outerHeight(); var targetPosition = target.position(); var footer =$("#page-footer"); var footerHeight = footer.outerHeight(); $(window).resize(function(){ windowHeight = $(this).height(); }); var timer =false; $(window).scroll(function(){ if (timer !== false) { clearTimeout(timer); } timer =setTimeout(function(){ var scrollTop = $(this).scrollTop(); var visibleBottom = scrollTop + windowHeight; var targetBottom = targetPosition.top + targetHeight; if (visibleBottom >= targetBottom) { if(footerHeight > contentHeight - visibleBottom) { target.css({position:"fixed" , bottom: footerHeight - ( contentHeight - visibleBottom)}); } else { target.css({position:"fixed", bottom:0}); } } else { target.css({position:"static", bottom: "auto"}); } }, 10); }); });
このコードだと、スクロール終了後10ミリ秒後に動くようになってます。
あってるかどうかもわかりませんが、なんとか動いてるようなのでこれでOKにしておきますw。
コードの読み込み
上のコードをfixed-sidebar.jsとかの名前で保存してテーマ内に保存したら、テンプレートファイルをイジイジします。
<?php wp_enqueue_script('fixed-sidebar', get_template_directory_uri() . '/js/fixed-sidebar.js'); ?>
うちではこれをfooter.phpのwp_footer()の直前に挿入しました。
こんな面倒くさいことしなくても<script>~</script>で書いてもいいと思います。
まとめ
サイドバーを固定したらなんとなくカッコ良くなったw というのが今回のまとめです♪
特に問題は出てないと思うのでしばらくはこれでいきます。
なにか問題があればコメント欄で教えてください。
ではノシ