Define As You Scroll

HTML

<div class="container">
    <div class="row">
        <div class="col-sm-8">
             <h2>Sample <abbr data-term='blog' title='Webblog'>blog</abbr> post</h2>

            <p>January 1, 2014 by <a href="#">Mark</a>

            </p>
            <p>This blog post shows a few different types of content that's supported and styled with Bootstrap. Basic typography, images, and code are all supported.</p>
            <hr>
            <p>Cum sociis natoque penatibus et magnis <a href="#">dis parturient montes</a>, nascetur ridiculus mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum.</p>
            
            
            <blockquote>
                <p><abbr data-term='Curabitur'>Curabitur</abbr> blandit tempus porttitor. <strong><abbr data-term='Nullam' title='Nullam'>Nullam</abbr> quis risus eget urna mollis</strong> ornare vel eu leo. Nullam id dolor id <abbr title="Cool">COOOL</abbr> nibh ultricies vehicula ut id elit.</p>
            </blockquote>
            
            
            
            
            <p>Etiam porta <em>sem <abbr data-term='Cool' >gkh çfoi</abbr> malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p>
             <h2>Heading</h2>

            <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
             <h3>Sub-heading</h3>

            <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> <pre><code>Example code block</code></pre>

               <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> <pre><code>Example code block</code></pre>
                 <p>Cum...

CSS

abbr.defined {
    background: red;
}
.definition {
    display: none;
}
#definitions {
    position: fixed;
}

JavaScript

var mapTerms = function () {
    /*grab all of the <abbr>s with terms associated with them, they can move anytime the browser is resized*/
    var terms = [];
    $('abbr[data-term]').each(function () {
        var term = $(this);
        terms.push({
            term: term.data('term'),
            height: term.offset().top,
            visible: false,
            element: term
        });
    });
    return terms;
},
terms = [],
    /*Keep a globally accessible list*/
    $body = $('body'); /*need a reference to the body for performance*/

$(window).on('scroll', function () {
    /*listen to the scroll event*/
    var height = $(document).scrollTop(),
        i;

    for (i = 0; i < terms.length; i++) {
        if (terms[i].visible) {
            if (terms[i].height < height || terms[i].height > (height + 50)) {
                terms[i].visible = false;
                terms[i].element.removeClass('defined');
                $('div[data-term=' + terms[i].term + ']').hide();
            }
        } else {
            if (terms[i].height > height && terms[i].height < (height + 50)) {
                terms[i].visible = true;
                terms[i].element.addClass('defined');
                $('div[data-term=' + terms[i].term + ']').show();
            }
        }
    }
}).on('resize', function () {
    /*listen to the resize event*/
    console.log('mapping...');
    terms = mapTerms();
}).trigger('resize').trigger('scroll');