追いかけてくるソーシャルボックスのサンプルコード

2013.4.22Hinemosu

当ブログ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制作の最新情報を分かりやすく解説するブログ」で使われているコードを参考にしました。この場を借りてお礼致します。