JSFiddle - React, Tailwind, and code Playground

by Craig Martin

HTML

dialogueTimings = [2,7,14,23,35,49,53,74,99,101,104,105,109,110,111,113,121,125,166,167,168,170,175,176,182,184,187,190,195,197,198,201,203,208,210,212,214,218,232,236,242,243,247,248,252,278,291,292,295,300,302,303,309,317,324,325,327,331,333,335,340,344,346,356,363,375,376,383,384,398,409,429];</script>


 <li spkr_name='Fictionz' class='cue speaker1 spk trlistyle notspeaking' start-offset='2'><div class='mark_time'>0:02</div><span>Hello, you are listening to Fictionz. Short serialized, female forward stories. </span></li><li spkr_name='Fictionz' class='cue speaker1 spk trlistyle notspeaking' start-offset='7'><div class='mark_time'>0:07</div><span>Please be advised the show may contain scenes that some viewers may find disturbing. It is intended for mature listeners. </span></li><li spkr_name='Rose' class='cue speaker1 spk trlistyle notspeaking' start-offset='14'><div class='mark_time'>0:14</div><span>You know how some people say, Oh, the lengths we'll go for love? Well, for every assistant in the entertainment industry, it's, Oh, the links will go for our abusers. </span></li><li spkr_name='Rose' class='cue speaker1 spk trlistyle notspeaking' start-offset='23'><div class='mark_time'>0:23</div><span>I mean, my interview at CAA only pertained to the sorority I was in because he and I quote, only hire sorority girls because it means we know how to be hazed and look good getting it. </span></li><li spkr_name='Rose' class='cue speaker1 spk trlistyle notspeaking' start-offset='35'><div class='mark_time'>0:35</div><span>I shit you not. And do you know who put me up for the job? One of my older sorority sisters, she also forced me to wear a shirt that said, I swallow cum daily, put my hair in pigtails and go to a fraternity party looking like that during Hell Week of hazing. </span></li><li spkr_name='Rose' class='cue speaker1 spk trlistyle notspeaking' start-offset='49'><div class='mark_time'>0:49</div><span>My therapist still hasn't undone the cycle that is my shit...

CSS

#my-element {
    position   : absolute;
    top        : 500px;
    background : gold;
    height     : 50px;
    width      : 50px;
}
#output {
    position : fixed;
    top      : 0;
    right    : 0;
    height   : 200px;
    width    : 200px;
    border   : 1px solid yellow;
    overflow : hidden;
}

JavaScript

var $output = $('#output');
$(window).on('scroll', function () {
    var scrollTop     = $(window).scrollTop(),
        elementOffset = $('#my-element').offset().top,
        distance      = (elementOffset - scrollTop);

    $output.prepend('<p>' + distance + '</p>');
});