Detecting element into view

by livibetter

HTML

<div class='longbar'>Long bar down... down... down...</div>

<div id='target'>I am the target!</div>

<div class='longbar'>Another long bar down...</div>

<pre id='status'></pre>

CSS

#target {
    background-color: #66C;
    color: #FFF;
}

.longbar {
    margin-left: 1em;
    padding-left: 1em;
    border-left: 1em solid #333;
    height: 2000px;
}

#status {
    position: fixed;
    top: 0;
    right: 0;
    background-color: #000;
    color: #FFF;
}

#status.inview {
    background-color: #600;
}

JavaScript

function check() {
    var $t = $('#target');
    var $w = $(window);
    var $s = $('#status');
    // detecting margin = 1 window height
    var dm = $w.height();
    var inview = false;

    if ($w.scrollTop() + $w.height() >= $t.offset().top - dm) {
        inview = true;
    }

    var s = '';
    $s.removeClass('inview');
    if (inview) {
        s += '#target (about) into view' + '\n\n';
        $s.addClass('inview');
    }
    s += 'window.scrollTop: ' + $w.scrollTop() + '\n';
    s += 'window.height: ' + $w.height() + '\n';
    s += 'window.viewBottom: ' + ($w.scrollTop() + $w.height()) + '\n';
    s += '\n';
    s += 'detecting margin: ' + dm + '\n';
    s += 'trigger edge: ' + ($t.offset().top - dm) + '\n';
    s += '\n';
    s += 'target.top: ' + $t.offset().top;
    $s.text(s);
}

function init() {
    $(window).scroll(check).resize(check);
    check();
}

$(init);