Show on scroll

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css">
<div class="box">
    <span class="box-title text">MORE STORIES</span>
    <div>
        <a href="#"><img width="326" height="150" src="http://dummyimage.com/326x150/23a343/edfcf7&text=Detect+scroll" /></a>
        <h3><a href="#">Lorem ipsum</a></h3>
        <p>Neque porro [...]</p>
    </div>
</div>

CSS

.motionR{
    background:#FF00FF;
    transition: right 500ms cubic-bezier(0.265, 0.365, 0.26, 0.865);
    right: 0px;
}
.motionL{
    background:#669900;
    transition: right 500ms cubic-bezier(0.265, 0.365, 0.26, 0.865);
}
.box {
    width: 293px;
    bottom: 48px;
    right: -384px;
    background-color: #fafafa;
    padding: 16px 25px 0px 25px;
    z-index: 9999;
}

JavaScript

var status = 'close'

$(window).scroll(function (e) {
    write_status();

    if ( $(window).scrollTop() > half_screen )
    {
        $('.box').removeClass('motionL');
        $('.box').addClass('motionR');
        status = 'open';
    }
    else
    {
        if( status === 'open' )
        {
            $('.box').removeClass('motionR');
            $('.box').addClass('motionL');
            status = 'close';
        }
    }
});