滚动浏览页面的相对百分比后，如何显示此弹出窗口？

Question

我正在一个具有“文章框”功能的Wordpress网站上工作，该功能可以在用户滚动到页面上的X点后在网站上建议另一个文章。

问题在于这不是相对值，而是绝对值。这意味着该框在较长的文章中很早出现，在较短的文章中很晚出现，并且在不同的屏幕分辨率下不一致。

“文章框”采用在管理面板中设置的一些值，包括“到顶部的距离”，“显示哪些文章”，“文章显示视图”，“帖子数”和“禁用时间”。我希望为下面的代码摘录提供上下文。

向下滚动此页面可以看到一个实时示例。

我找到了相关的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();

我如何才能使用户在页面上达到一定百分比后出现该框？

Answer 1

设置元素显示位置的文档高度的百分比即可，此处为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 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;   
}