【jQuery】一定位置までスクロールしたらピョコッと飛び出るアレ

おなじみのアレ

by tea4two

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<p>なんかくだらない記事。まったく読む価値の無い記事。</p>

<p>つらつら書きまくり</p>
<p>なんかくだらない記事。まったく読む価値の無い記事。</p>

<p>つらつら書きまくり</p>
<p>なんかくだらない記事。まったく読む価値の無い記事。</p>

<p>つらつら書きまくり</p>
<p>なんかくだらない記事。まったく読む価値の無い記事。</p>

<p>つらつら書きまくり</p>
<p>なんかくだらない記事。まったく読む価値の無い記事。</p>

<p>つらつら書きまくり</p><p>なんかくだらない記事。まったく読む価値の無い記事。</p>

<p>つらつら書きまくり</p>
<p>なんかくだらない記事。まったく読む価値の無い記事。</p>

<p>つらつら書きまくり</p>
<p>なんかくだらない記事。まったく読む価値の無い記事。</p>

<p>つらつら書きまくり</p>
<p>なんかくだらない記事。まったく読む価値の無い記事。</p>

<p>つらつら書きまくり</p>

<p><a href="#" id="trigger">trigger</a></p>
<div id="popup">
    ひゃっほー!
    
   びろびろびろびろ〜
</div>

CSS

#popup {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 80px;
    height: 40px;
    -webkit-box-shadow: 0 0 8px rgba(0,0,0,.25);
    -moz-box-shadow: 0 0 8px rgba(0,0,0,.25);
    box-shadow: 0 0 8px rgba(0,0,0,.25);
    z-index: 9999;
    background: #fff;
}

#popup.popup {
    width: 300px;
    height: 80px;
}

JavaScript

var _popup = $('#popup');
    _popW = _popup.width(),
    _popH = _popup.height();

function popIn() {
    _popup.animate({
        'width':_popW,
        'height':_popH
    },300,'easeInOutBack');
}
$(window).on('scroll resize', function() {
    _popup.stop();
    if($(window).scrollTop() > 150) {
        _popup.animate({
            'width':300,
            'height':80
        },300,'easeInOutBack');
    } else {
        popIn();
    }
});