jQueryでスクロールで右下にひょこっと現れるボックス

表示サンプルはこちら。
jQueryを利用しているので、読み込んでください。

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

JavaScript

$(function() {
    var winWidth = $('body').outerWidth(true);
    var footer = $('#slide_box');
    var slide = $('#slide');
    //画面下位置を取得
    var bottomPos = $(document).height() - $(window).height() -500;
    var showFlug = false;

    // ウィンドウより小さかったら開く
    panelOpen();
    //slideを画面右外へ配置
    $('#slide').css('margin-left', winWidth+'px');
    $(window).scroll(function () {
        panelOpen();
    });
    //閉じるボタン
    $('.close').click(function(){
        footer.hide();
    });
    //ウィンドウリサイズしたらwidth変更
    $(window).resize(function(){
        winWidth = $('body').outerWidth(true);
        bottomPos = $(document).height() - $(window).height() - 500;
    });

    function panelOpen() {
        if ($(this).scrollTop() > 200) {
            if (showFlug == false) {
                showFlug = true;
                slide.stop().animate({'marginLeft' : '0px'}, 200);
            }
        } else {
            if (showFlug) {
                showFlug = false;
                slide.stop().animate({'marginLeft' : winWidth+'px'}, 200);
            }
        }
    }
});

CSS

#slide_box {
    overflow: hidden;
    position: fixed;
    width:200px;
    bottom:0;
    right:0;
}

#slide {
    width: 100%;
}
#slide-in {
    padding: 20px;
    margin:5px;
    background:#FFF;
    box-shadow:rgba(0, 0, 0, 0.1) 0px 0px 2px 1px;
    -webkit-box-shadow:rgba(0, 0, 0, 0.1) 0px 0px 2px 1px;
    -moz-box-shadow:rgba(0, 0, 0, 0.1) 0px 0px 2px 1px;
    border:1px solid #cdcdcd;   
}

HTML

<div id="slide_box">
<div id="slide">
<div id="slide-in">
<span class="close"><a href="javascript:void(0)"><i class="icon-remove"></i></a></span>
ひょこっと。
</div>
</div>
</div>

参考：jQueryでスクロールすると表示する系いろいろ