JSFiddle - React, Tailwind, and code Playground

HTML

<div class="pad">Scroll Down</div>
<div id="intro"></div>

CSS

.pad{height: 1000px; border: solid 2px #ccc;}

JavaScript

var c = 0;

$(window).scroll(function() {
    if((window.innerHeight + window.scrollY) >= document.body.offsetHeight){
        c++;
        if (c <= 7) {
            var el = $('<ul><li><a target="_blank" href="http://mywebsite.com"><img src="images/filler.png" alt="" />Count = ' + c + '&raquo;</a></li></ul><br class="clear" />').hide().appendTo('#intro').fadeIn();
        } else if (c == 8) {
            var el = $('<br /><p><a target="_blank" href="example_page.html">Search historical stories</a></p>').hide().appendTo('#intro').fadeIn();
        }
    } 
});