JSFiddle - React, Tailwind, and code Playground

by csaltyj

HTML

<div id="header">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sed massa nec diam aliquet rutrum. Cras orci sapien, luctus a congue sed, bibendum a quam. Nam accumsan suscipit molestie. Sed luctus, magna eu rutrum gravida, est sem vestibulum odio, ut eleifend dolor nunc ut arcu.
</div>
<div id="magic">Howdy!</div>
<div id="report">&nbsp;</div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

CSS

#header {
    font-size: 3.2em;
    width: 700px;
    color: #ccc;
}
#magic {
    width: 150px;
    height: 80px;
    background: #9ee;
    border: 15px solid black;
    padding: 2em;
}
#report {
    opacity: 0.8;
    position: fixed;
    bottom: 0;
    left: 0;
    border: 1px solid #333;
    width: 100%;
    background: #000;
    color: #fff;
    padding: 1em;
    font-size: 0.7em;
    font-weight: bold;
}

JavaScript

/* Object visibility awareness */

var winWidth = $(window).width();
var winHeight = $(window).height();
var objHeight = $('#magic').offset().top + $('#magic').outerHeight();
var objWidth = $('#magic').offset().left + $('#magic').outerWidth();
var objTopEdge = $('#magic').offset().top;
var objLeftEdge = $('#magic').offset().left;

function report(txt)
{
    $('#report').text(txt);
}

function dostuff($elem)
{
    var wow = $(window).height() + $(window).scrollTop() - $elem.offset().top;
    var wow2 = $elem.offset().top - $(window).scrollTop();
    var wee = $(window).width() + $(window).scrollLeft();
    var wee2 = $elem.offset().left - $(window).scrollLeft();
    
    if (wow < 0) wow = 0;
    else if (wow > $elem.outerHeight())
        wow = $elem.outerHeight();
    
    if (wow2 > 0) wow2 = 0;
    else
        wow2 = Math.abs(wow2);

    var total = wow - wow2;
    if (total < 0) total=0;
    report('magic# ' + (total / $elem.outerHeight()) + '; test: ' +
          wee + ',' + wee2 + ', obj w ' + $elem.outerWidth());
}

x = dostuff($('#magic'));
$('#report').text(x);

$(window).scroll(function() {
    var sTop = $(window).scrollTop();
    var sLeft = $(window).scrollLeft();

    dostuff($('#magic'));
});

$('#report').click(function() {
    $(this).html('&nbsp;');
});