(SOPT) Show on Scroll Final

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css">
<!-- botão para remover divs -->
<div id="remove">
    <button id="btn-remove" class="text btn btn-warning btn-mini">Eliminar div (5)</button>
</div>

<!-- status -->
<div id="scroll-val" class="text">.</div>
<!-- blocos de conteúdo -->
<div class="aux ye text lines"><h3>1 - Mostrar box quando scroll atingir 50% da tela</h3></div>
<div class="aux re text lines"><h3>2</h3></div>
<div class="aux bl text lines"><h3>3</h3></div>
<div class="aux ye text lines"><h3>4</h3></div>
<div class="aux re text lines"><h3>5</h3></div>

<!-- div para animar -->
<div class="box"><span class="box-title text label label-info">MORE STORIES</span>

    <div> <a href="#"><img width="326" height="150" src="http://dummyimage.com/326x150/23a343/edfcf7&text=Detect+scroll" class="img-polaroid" /></a>

         <h3><a href="#">Lorem ipsum</a></h3>

        <p class="text-info">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...</p>
    </div>
</div>

CSS

body, html, .box {
    margin: 0;
}
.box {
    position: fixed;
    width: 293px;
    bottom: 48px;
    right: -384px;
    background-color: #fafafa;
    padding: 16px 25px 0px 25px;
    z-index: 9999;
}
.motionR {
    transition: right 500ms cubic-bezier(0.265, 0.365, 0.26, 0.865);
    right: 0px;
}
.motionL {
    transition: right 500ms cubic-bezier(0.265, 0.365, 0.26, 0.865);
}
.aux {
    /* blocos coloridos */
    min-height: 500px;
    width:100%;
    clear:both;
    float:left;
}
.lines {
    /* grid horizontal */
    background-size: 100px 100px;
    background-image:repeating-linear-gradient(0deg, #aaa, #aaa 1px, transparent 1px, transparent 100px);
}
.ye {
    background-color:#ee5;
}
.re {
    background-color:#55e;
}
.bl {
    background-color:#e5e;
}
.text {
    font-family: sans-serif;
    color: #333333;
    font-size: 20px;
}
#remove {
    position: fixed;
    bottom: 0;
    left:0;
    padding: 0 0 10px 20px;
}
#btn-remove {
    font-size:12px
}
#scroll-val {
    position: fixed;
    top: 0;
    right:0;
    padding: 30px 85px 0 0;
}
#scroll-val::before {
    font-size:12px;
    content:'Scroll: ';
}
.box-title {
    font-weight: normal;
    line-height: 30px;
    display: inline-block;
    text-align: center;
    width: 290px;
    margin-bottom: 18px;
}
h3 {
    margin: -5px 0 0 5px;
}
}

JavaScript

var height;
var available;
var percentage_of_page;
var half_screen;
var open_box = false;

/* Escreve o status do scroll em #scroll-val */
function write_status() {
    // Document minus Viewport
    // http://stackoverflow.com/a/1304384/1287812
    available = $(document).height();// - $(window).height(); 
    percentage_of_page = 0.5;
    half_screen = parseInt( available * percentage_of_page );
    $('#scroll-val').html(height + '/' + available + ' - Aparece em: ' + half_screen);
}

/* Listener do scroll */
$(window).scroll(function (e) {
    height = $(window).scrollTop();
    write_status();
    if ( height > half_screen ) {
        if( !open_box ) {
            open_box = true;
            $('.box').removeClass('motionL').addClass('motionR');
        }
    } else {
        if( !$('.box').hasClass('motionL') ) {
            open_box = false;
            $('.box').removeClass('motionR').addClass('motionL');
        }
    }
});

/* Remover elementos da página para reposicionar o aparecimento do .box */
$('#btn-remove').click(function () {
    $('.aux').last().remove();
    write_status();
    $(this).text('Eliminar div (' + $('.aux').length + ')');
});