我在一个 Wordpress 网站上工作,它有一个“文章框”功能,当用户滚动到页面上的 X 点后,该功能会建议网站上的另一篇文章。
问题是这不是相对值,而是绝对值。这意味着该框在较长的文章中出现得很早,在短文章中出现得很晚,并且在不同的屏幕分辨率下不一致。
“文章框”采用管理面板中设置的一些值,包括“与顶部的距离”、“显示哪些文章”、“文章显示 View ”、“帖子数”和“禁用时间” .我希望能为下面的代码摘录提供上下文。
您可以通过 scrolling down this page 查看一个实例.
我找到了相关的 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();
我怎样才能让它在用户达到页面上的特定百分比时显示该框?
最佳答案
这将是设置 document height 的百分比的问题元素应该出现的位置,这里是 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>
关于javascript - 滚动页面的相对百分比后,如何让这个弹出窗口出现?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25768895/