How can I get this pop-up to appear after scrolling through relative percentage of the page?

Question

I'm working on a Wordpress website which has an "article box" feature which suggests another article on the website after a user has scrolled to point X on the page.

The problem is that this is not a relative value, but an absolute one. Meaning that the box appears very early in longer articles, late in short articles, and is inconsistent across different screen resolutions.

The "article box" takes a few values set in the admin panel including "distance from the top", "which articles are displayed", the "article display view", "number of posts", and "disable time". I hope that provides context for the code excerpt below.

You can see a live example by scrolling down this page.

I've found the relevant JavaScript:

            /**
 * More stories box
 */
if(tds_more_articles_on_post_enable == "show") {
    //adding event to scroll
    jQuery(window).scroll(function(){

        var cookie_more_box = td_read_site_cookie('td-cookie-more-articles');
        //alert(cookie_more_box);

        //setting distance from the top
        if(!isNaN(parseInt(tds_more_articles_on_post_pages_distance_from_top)) && isFinite(tds_more_articles_on_post_pages_distance_from_top) && parseInt(tds_more_articles_on_post_pages_distance_from_top) > 0){
            var set_distance = parseInt(tds_more_articles_on_post_pages_distance_from_top);
        } else {
            var set_distance = 400;
        }

        if (jQuery(this).scrollTop() > set_distance && cookie_more_box != 'hide-more-articles-box') {
            jQuery('.td-more-articles-box').addClass('td-front-end-display-block');
        } else {
            jQuery('.td-more-articles-box').removeClass('td-front-end-display-block');
        }
    });

    //adding event to hide the box
    jQuery('.td-close-more-articles-box').click(function(){

        //hiding the box
        jQuery('.td-more-articles-box').removeClass('td-front-end-display-block');
        jQuery('.td-more-articles-box').hide();

How can I make it so the box appears once the user has reached a certain percentage on the page?

Answer 1

It would be a matter of setting a percentage of the document height where the element should show up, here at 50%:

var available;
var percentage_of_page;
var half_screen;
var height;

$(window).scroll(function (e) {
    available = $(document).height();
    percentage_of_page = 0.5;
    half_screen = available * percentage_of_page;
    height = $(window).scrollTop();
    if ( height > half_screen ) {
        $('#element').show();
    } else {
        $('#element').hide();
    }
});

var height;
var available;
var percentage_of_page;
var half_screen;

function write_status() {
    // Document minus Viewport
    // https://stackoverflow.com/a/1304384/1287812
    // available = $(document).height() - $(window).height(); 
    available = $(document).height();
    percentage_of_page = 0.5;
    half_screen = available * percentage_of_page;
    $('#scroll-val').html( height + '/' + available + ' - Show at: ' + half_screen );
}

$(window).scroll(function (e) {
    height = $(window).scrollTop();
    write_status();
    if (height > half_screen ) {
        $('.box').addClass('display-block');
    } else {
        $('.box').removeClass('display-block');
    }
});

$('#remove').click(function(){
    $('.aux').last().remove();
    write_status();
    $(this).text( 'Remove div (' + $('.aux').length + ')' );
});

body,html {
    margin: 0;
}
.aux {
    min-height: 500px;
    width:100%;
    clear:both;
    float:left;
}
.lines {
    background-size: 100px 100px;    
    background-image:repeating-linear-gradient(0deg, #aaa, #aaa 1px, transparent 1px, transparent 100px);
}
.ye {
    background-color:#ee5;
}
.re {
    background-color:#55e;
}
.bl {
    background-color:#e5e;
}
.text {
    font-family: sans-serif;
    color: #333333;
    font-size: 20px;
}
#button {
    position: fixed;
    top: 0;
    left:0;
    padding: 20px 0 0 60px;
}
#remove {
    font-size:12px
}
#scroll-val {
    position: fixed;
    top: 0;
    right:0;
    padding: 20px 85px 0 0;
}
#scroll-val::before {
    font-size:12px;
    content: 'Scroll: ';
}
.box {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    position: fixed;
    width: 293px;
    bottom: 48px;
    right: -384px;
    background-color: #fafafa;
    padding: 16px 25px 0px 25px;
    z-index: 9999;
    visibility: hidden;
    -webkit-transition: right 500ms cubic-bezier(0.265, 0.365, 0.26, 0.865);
    -moz-transition: right 500ms cubic-bezier(0.265, 0.365, 0.26, 0.865);
    -o-transition: right 500ms cubic-bezier(0.265, 0.365, 0.26, 0.865);
    transition: right 500ms cubic-bezier(0.265, 0.365, 0.26, 0.865);
}
.box-title {
    font-weight: normal;
    line-height: 30px;
    display: inline-block;
    text-align: center;
    width: 290px;
    margin-bottom: 18px;
}
.display-block {
    right: 0px;
    visibility: visible;   
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="button"><button id="remove" class="text">Remove div (5)</button></div>
<div id="scroll-val" class="text">0</div>
<div class="aux ye text lines">1</div>
<div class="aux re text lines">2</div>
<div class="aux bl text lines">3</div>
<div class="aux ye text lines">4</div>
<div class="aux re text lines">5</div>

<div class="box">
    <span class="box-title text">MORE STORIES</span>
    <div>
        <a href="#"><img width="326" height="150" src="http://dummyimage.com/326x150/23a343/edfcf7&text=Detect+scroll"></a>
        <h3><a href="#">Lorem ipsum</a></h3>
        <p>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...</p>
    </div>
</div>

Answer 2

You can use the jQuery Waypoints library. You can either set it to fire some code when a particular element has scrolled into view, or you can set a percentage of the viewport for it to fire.