追いかけてくるソーシャルボックスのサンプルコード
当ブログHinemosuの個別記事画面左側に、スクロールしても追いかけてくるソーシャルボックスを設置しました。
横幅が980px以上ないと表示されないので、「見えないよ？」って場合はガガンとウィンドウ幅を広げてみてください。
追いかけてくるソーシャルボックスのコード
参考までにウチのブログで使っているソーシャルボックスのコード概要を提示します。
まずソーシャルボックスを作成し、その後にソーシャルボックスが追いかけてくるようにします。
ソーシャルボックスのコード
ソーシャルボックス付近のHTML構造はこんな感じ。
<div id="floating_box_wrapper">
<div id="main"></div>
<div id="floating_box_container">
<div id="floating_box">
<div>ボタン1</div>
<div>ボタン2</div>
<div>ボタン3</div>
</div>
</div>
</div>
mainを包むwrapperを作って、そのwrapperの中に（mainと共に）floating_boxのコンテナを設置します。
関連するCSSはこんな感じ。横幅や余白はデザインに併せて調整してください。
#floating_box_wrapper{position: relative;width:100%;max-width:980px;margin: 0 auto;}
#floating_box_container {top:128px;left:-128px;position:absolute;}
#floating_box_container .fixed{position: fixed;top:20px;}
#floating_box {padding: 12px 0px 12px 12px;z-index: 1;width:116px;background-color:#FCFCFC;border: 1px solid gainsboro;border-top-left-radius: 6px;border-bottom-left-radius: 6px;border-right: 0px;}
#floating_box div{height:36px;}
ポイントは、wrapperのpositionを相対(relative)にして、containerにネガティブマージン “left:-128px;" を持たせる事。これでソーシャルボックスが「はみ出る」ようにしています。
あとはmainにピタッとくっつくよう、floating_boxの横幅とcontainerのネガティブマージンを同じ値に調整し、かつcontainer右側のborderをなくすコトでmainと一体感を持たせたのがコダワリかな？
追いかけてくるコード
ソーシャルボックスが追いかけてくるコードはこんな感じ。
<script>
$(function($) {
var floating_area = $('#floating_box');
var offset = floating_area.offset();
var floating_end = $('#floating_box_end');
var floating_end_offset = floating_end.offset();
$(window).scroll(function () {
if($(window).scrollTop() > (floating_end_offset.top - floating_area.height())) {
floating_area.fadeOut();
} else if($(window).scrollTop() > offset.top) {
floating_area.fadeIn();
floating_area.addClass('fixed');
} else {
floating_area.removeClass('fixed');
}
});
});
</script>
ブラウザのスクロール量が一定値を超えると、floating_boxのclassに 'fixed’ が付き、"#floating_box_container .fixed"のCSSが有効になります。このCSSではTOPの位置を絶対値で指定しているので、「スクロールしても付いてくる」コトになります。
このコードは「Stocker.jp / diary | Webデザイン、Web制作の最新情報を分かりやすく解説するブログ」で使われているコードを参考にしました。この場を借りてお礼致します。
おまけ：ソーシャルボックスをフェードアウトさせる
以下のコードがある場所までスクロールが進むと、ソーシャルボックスの表示がフェードアウトします。
<div id="floating_box_end"></div>
ウチのブログでは関連記事などを表示する領域の直前に上記コードが入っていて、関連情報を見ているときはソーシャルボックスがフェードアウトするようにしています。。
まとめ
最近よく見かける「はみでる」と「追いかけてくる」をマネしたくて、何日かうなりつつコードを書きました。
完成しちゃえばシンプルなコードだけど、相対位置指定とかネガティブマージンとか初めて使ったから大変だったよ。
もし「ブログに設置したけど動かないよ！」なんて事がありましたら、ツイッター( @hideto )なりコメント欄なりでご連絡ください。できる範囲でサポートしたいと思います。
そんな感じで！