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

i'm working on wordpress website has "article box" feature suggests article on website after user has scrolled point x on page.

the problem not relative value, absolute one. meaning box appears in longer articles, late in short articles, , inconsistent across different screen resolutions.

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

you can see live example scrolling down page.

i've found relevant javascript:

            /**  * more stories box  */ if(tds_more_articles_on_post_enable == "show") {     //adding event scroll     jquery(window).scroll(function(){          var cookie_more_box = td_read_site_cookie('td-cookie-more-articles');         //alert(cookie_more_box);          //setting distance 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 hide box     jquery('.td-close-more-articles-box').click(function(){          //hiding box         jquery('.td-more-articles-box').removeclass('td-front-end-display-block');         jquery('.td-more-articles-box').hide(); 

how can make box appears once user has reached percentage on page?

it matter of setting percentage of document height element should show up, here @ 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>