JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
</div>
<div class="flyer"></div>

CSS

.flyer {
    top:0px; height:0px;
    width:300px;
    height:100px;
    background-color:#ffc;
    border:solid 1px #000;
    position:absolute;
}

JavaScript

// Code in regards to this post: (credit to Jimmy Chandra)
// http://stackoverflow.com/questions/4669888/scroll-position-while-scrolling-down-jquery/4670157#4670157

$(".flyer").fadeOut(0);
for (var i = 0; i < 500; i++) {
    $("<div class=\"item\">Line " + i +"</div>").appendTo($(".container"));
}
    
$(window).scroll(function(e) {
    var dh = $(document).height();
    var sh = $(this).scrollTop();
    alert(dh + " " + sh);
    
    $('.flyer').offset({left:20,top:sh+20});
    
    if (sh / dh > 0.70) {
        $(".flyer").fadeIn("fast");          
    } else {
        $(".flyer").fadeOut("fast");
    }        
});