Wie kann ich dieses Pop-up erscheinen lassen, nachdem ich durch den relativen Prozentsatz der Seite gescrollt habe?

Question 1

Ich arbeite an einer WordPress-Website, die über eine “Artikelbox”-Funktion verfügt, die einen anderen Artikel auf der Website vorschlägt, nachdem ein Benutzer zu Punkt X auf der Seite gescrollt hat.

Das Problem ist, dass dies kein relativer Wert ist, sondern ein absoluter. Das bedeutet, dass die Box in längeren Artikeln sehr früh, in kurzen Artikeln spät erscheint und über verschiedene Bildschirmauflösungen hinweg inkonsistent ist.

Die “Artikelbox” nimmt einige Werte auf, die im Admin-Panel festgelegt wurden, darunter “Entfernung von oben”, “welche Artikel angezeigt werden”, die “Artikelanzeigeansicht”, “Anzahl der Beiträge” und “Deaktivierungszeit”. Ich hoffe, das liefert Kontext für den Code-Auszug unten.

Sie können ein Live-Beispiel von sehen diese Seite nach unten scrollen.

Ich habe das relevante JavaScript gefunden:

            /**
 * 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();

Wie kann ich dafür sorgen, dass das Feld erscheint, sobald der Benutzer einen bestimmten Prozentsatz auf der Seite erreicht hat?

Question 2

Es wäre eine Frage der Einstellung eines Prozentsatzes der Dokumenthöhe, wo das Element erscheinen soll, hier bei 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 + "https://stackoverflow.com/" + 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>

Question 3

Du kannst den … benutzen jQuery-Wegpunkte Bibliothek. Sie können es entweder so einstellen, dass Code ausgelöst wird, wenn ein bestimmtes Element in die Ansicht gescrollt wurde, oder Sie können einen Prozentsatz des Ansichtsfensters festlegen, damit es ausgelöst wird.