根据滚动位置更改div内容 [英] Changing div content based on scroll position

问题描述

我希望在另一个Stack Exchange帖子中使用这个代码提供一些帮助。下面是javascript：

  $（window）.on（scroll resize，function（）{
 var （$）$（'＃date'）。offset（）; 
 $（'。post'）。each（function（）{
 if（pos.top> = $（this）.offset （）.top& pos.top< = $（this）.next（）。offset（）。top）
 {
 $（'＃date'）。html（$（这个）.html（））; //或者你想获得日期的任何其他方式
 return; //打破循环
} 
}）; 
}）; 
 $ b $（document）.ready（function（）{
 $（window）.trigger（'scroll'）; //初始值
}）; 
  

我在我自己的网站上实现了它： http://peterwoyzbun.com/newscroll/scroll.html 。当滚动位置到达某个点时，框中的信息会发生变化。目前，不断变化的内容直接来自div.post。也就是说，当用户滚动到给定的.post时，固定的灰色框会加载.post中的内容。

我想要做的是让灰色框显示用户目前所看到的内容。因此，当用户到达divcontent1时，灰色框会显示content1的文本说明。也许当content1达到一个divdescription1在灰色框中隐藏？

任何帮助将不胜感激。

解决方案

在包含说明的每个部分中添加一个隐藏元素，例如：

 < div id =content1> 
< p class =descriptionstyle =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; 
} 
  

Jsfiddle

I am hoping for some help using this code from another Stack Exchange post. Below is the 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
});

I have implemented it on my own website here: http://peterwoyzbun.com/newscroll/scroll.html. When the scroll position reaches a certain point, the information in the box changes. At the moment, the changing content comes directly from the div ".post". That is, when a user scrolls to a given ".post" the fixed grey box loads what is in ".post".

What I would like to do is have the grey box display a description of what the user is currently seeing. So when the user reaches the div "content1" the grey box displays a text description of "content1". Maybe when "content1" is reached a div "description1" becomes un-hidden within the grey box?

Any help would be greatly appreciated. Thanks!

解决方案

Add an hidden element inside each section containing the description, for i.e. :

<div id="content1">
<p class="description" style="display: none;">content1 description</p>
....
</div>

then in javascript get the description of the relevant section like this:

if(pos.top >= $(this).offset().top && pos.top <= $(this).next().offset().top)
        {
            $('#date').html($(this).find('.description').text());
            return;
        }

Jsfiddle

这篇关于根据滚动位置更改div内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！