JSFiddle - React, Tailwind, and code Playground

by chrisbenseler

HTML

teste<br />teste<br />teste<br />teste<br />teste<br />teste<br />teste<br />teste<br />teste<br />teste<br />teste<br />teste<br />teste<br />teste<br />teste<br />teste<br />teste<br />teste<br />teste<br />teste<br />teste<br />teste<br />teste<br />teste<br />teste<br />teste<br />teste<br />teste<br />teste<br />teste<br />teste<br />teste<br />teste<br />teste<br />teste<br />teste<br />teste<br />teste<br />teste<br />teste<br />teste<br />
teste<br />teste<br />teste<br />teste<br />teste<br />teste<br />teste<br />teste<br />
teste<br />teste<br />teste<br />teste<br />teste<br />teste<br />teste<br />teste<br />
teste<br />teste<br />teste<br />teste<br />teste<br />teste<br />teste<br />teste<br />
teste<br />teste<br />teste<br />teste<br />teste<br />teste<br />teste<br />teste<br />
teste<br />teste<br />teste<br />teste<br />teste<br />teste<br />teste<br />teste<br />
teste<br />teste<br />teste<br />teste<br />teste<br />teste<br />teste<br />teste<br />
teste<br />teste<br />teste<br />teste<br />teste<br />teste<br />teste<br />teste<br />
teste<br />teste<br />teste<br />teste<br />teste<br />teste<br />teste<br />teste<br />
teste<br />teste<br />teste<br />teste<br />teste<br />teste<br />teste<br />teste<br />
teste<br />teste<br />teste<br />teste<br />teste<br />teste<br />teste<br />teste<br />
teste<br />teste<br />teste<br />teste<br />teste<br />teste<br />teste<br />teste<br />
teste<br />teste<br />teste<br />teste<br />teste<br />teste<br />teste<br />teste<br />
teste<br />teste<br />teste<br />teste<br />teste<br />teste<br />teste<br />teste<br />
teste<br />teste<br />teste<br />teste<br />teste<br />teste<br />teste<br />teste<br />
teste<br />teste<br />teste<br />teste<br />teste<br />teste<br />teste<br />teste<br />
teste<br />teste<br />teste<br />teste<br />teste<br />teste<br />teste<br />teste<br />
teste<br />teste<br />teste<br />teste<br />teste<br />teste<br />teste<br />teste<br />
teste<br />teste<br />teste<br...

JavaScript

var timer = 0;
var scroller = false;
var endContent = false;
var didComplete = false;

var hasStarted = false, hasEnded = false;

var startTime = new Date();
var beginning = startTime.getTime();
var totalTime = 0;

var pageTitle = document.title;

// Default time delay before checking location
var callBackTime = 100;

var height = $(document).height();
var bottom = $(window).height() + $(window).scrollTop();
var delta = height - bottom;
var midpoints = {
    "25": parseInt(delta/4),
    "50": parseInt(delta/2),
    "75": parseInt((delta/4) * 3)
}

console.log(midpoints);


function trackLocation() {
    
    var bottom = $(window).height() + $(window).scrollTop();
    
    //console.log(bottom);
    //console.log(height);
    
    //has started scroll
    if(!hasStarted) {
        hasStarted = true;
        console.log("start scroll!");
    }
    
    //midpoints
    if(bottom > midpoints["25"])
        console.log("25!");
    
    if(bottom > midpoints["50"])
        console.log("50!");
    
    if(bottom > midpoints["75"])
        console.log("75!");
    
    if(bottom>=height && !hasEnded) {
        console.log("reach bottom!");
        hasEnded = true;
    }
}

$(window).scroll(function() {
    if (timer) {
        clearTimeout(timer);
    }
    
    // Use a buffer so we don't call trackLocation too often.
    timer = setTimeout(trackLocation, callBackTime);
});