JSFiddle - React, Tailwind, and code Playground

by Berklie

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));
}

$(window).scroll(function () {
    var myelement = $('#overdueWarning');

    if (isScrolledIntoView(myelement)) {
        alert('Your book is overdue');
    }
});