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?
