JSFiddle - React, Tailwind, and code Playground

by mohammadAdil

HTML

<div class="divSpacer">(Scroll Down)</div>

<div id="overdueWarning" class="divWarning">Overdue Notice</div>

<div class="divSpacer"></div>

CSS

.divSpacer {
    width: 150px;
    height: 1000px;
}
.divWarning {
    background-color: #ff0000;
    color: #ffffff;
}

JavaScript

function isScrolledIntoView(elem) {
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}
var shown = false;
$(window).scroll(function () {
       var myelement = $('#overdueWarning');
        if(isScrolledIntoView(myelement)){
        if(!shown){
         console.log('Your book is overdue');
        }
         shown = true;
    }
    else{
     shown = false;
    }
});