JSFiddle - React, Tailwind, and code Playground

by guest271314

HTML

<div id="otherContent">
    Pellentesque at sem et tortor ullamcorper fringilla quis id lorem. Nunc pretium ex urna, non pharetra sapien faucibus in. Duis in lorem bibendum, facilisis risus elementum, interdum arcu. Praesent vitae urna ac leo convallis ornare. Nunc at diam et felis venenatis accumsan in ut massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sagittis fermentum lorem et faucibus. In hac habitasse platea dictumst. Donec vitae commodo tortor. Aenean aliquam sem non tortor tincidunt, luctus finibus augue rhoncus. Integer bibendum quis est nec auctor. Ut consectetur volutpat dictum. Integer tincidunt sapien ipsum, a cursus sem laoreet ac. Vivamus pretium fermentum tortor ac vestibulum. Nunc sagittis, ex at sollicitudin convallis, enim sem tempor ligula, id varius lectus orci nec magna. Donec congue nisi a nulla fermentum dapibus.
</div>
<div id="posts">
    <div class="reply" data-postid="1" data-seen="no">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi suscipit mi in egestas vulputate. Fusce interdum ex ac ornare venenatis. Aliquam eu odio vitae orci laoreet pulvinar et id lectus. Morbi accumsan ut eros eu tincidunt. Suspendisse eget augue volutpat, pretium diam a, vulputate sapien. Morbi id laoreet leo. Vestibulum varius nulla sed mauris feugiat rutrum. Pellentesque nisl mauris, efficitur luctus vestibulum in, bibendum vel justo. Morbi eu tristique leo. Maecenas vel pharetra eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam sit amet purus id dolor faucibus tempor eget sit amet neque.</div>
    <div class="reply" data-postid="2" data-seen="no">Praesent consequat orci sit amet nunc molestie viverra. Sed placerat purus sit amet egestas molestie. Sed posuere metus sapien, eu sodales sem feugiat ut. Aenean mollis ullamcorper justo nec luctus. Donec porta odio nunc. Sed feugiat, odio vitae sagittis facilisis, velit urna aliquet massa, quis facilisis leo ex id ante....

JavaScript

$(window).on("scroll", function (e) {
    var title = function() {
    document.title = $("[data-seen=yes]").length === $(".reply").length 
    ? "Post#123" 
    : "(" + $("[data-seen=no]").length + ")" + " - Post#123";
        return document.title
    };
     console.log(document.title);
    $(".reply").each(function (i, el) {
        if (el.getBoundingClientRect().top <= window.innerHeight) {
            el.dataset.seen = "yes";
            title();
        } else {
            el.dataset.seen = "no";
            title();
        };
    });
    try {
    if (window.innerHeight + window.scrollY >= Number($("[data-seen=yes]").css("height").replace(/px/, ""))) {

        $("[data-seen=yes]").next().data("seen", "yes");
        title();
         console.log($("[data-seen=no]").length
        ,
        $("[data-seen=yes]").length)
}
    } catch (e) {
      console.log(e)
    }

}).trigger("scroll")