[英]Changing div content based on scroll position
我希望在另一个Stack Exchange帖子中使用此代码提供一些帮助。 以下是javascript:
$(window).on("scroll resize", function(){
var pos=$('#date').offset();
$('.post').each(function(){
if(pos.top >= $(this).offset().top && pos.top <= $(this).next().offset().top)
{
$('#date').html($(this).html()); //or any other way you want to get the date
return; //break the loop
}
});
});
$(document).ready(function(){
$(window).trigger('scroll'); // init the value
});
我在我自己的网站上实现了它: http : //peterwoyzbun.com/newscroll/scroll.html 。 当滚动位置到达某个点时,框中的信息会发生变化。 目前,不断变化的内容直接来自div“.post”。 也就是说,当用户滚动到给定的“.post”时,固定灰色框加载“.post”中的内容。
我想要做的是让灰色框显示用户当前看到的内容。 因此,当用户到达div“content1”时,灰色框显示“content1”的文本描述。 也许当达到“content1”时,div“description1”在灰盒子中变得不隐藏?
任何帮助将不胜感激。 谢谢!
在包含描述的每个部分中添加隐藏元素,例如:
<div id="content1">
<p class="description" style="display: none;">content1 description</p>
....
</div>
然后在javascript中得到相关部分的描述如下:
if(pos.top >= $(this).offset().top && pos.top <= $(this).next().offset().top)
{
$('#date').html($(this).find('.description').text());
return;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.