根据滚动位置更改多个div的内容

Question

我的网站上有5个部分，一个固定的div里面有2个div，我希望根据滚动/查看哪个部分来更改内容。

我找到了这个jsFiddle ，这与我想要实现的效果不完全相同，而且我不知道如何使其对我有用 。

这是该jsFiddle中使用的JS代码，我假设应该做一些修改：

 $(window).load(function () {
     $(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).find('.description').text()); //or any other way you want to get the date
            return; //break the loop
        }
    });
});

$(document).ready(function () {
    $(window).trigger('scroll'); // init the value
});

})

这是我网站上的HTML片段：

这些部分：

    <section id="space">
</section>
<section id="sky">
</section>
<section id="home">   
</section>
<section id="about">
</section>
<section id="involved">
</section>

还有2个div：

 <div id="caption1" class="nivo-html-caption">
     <h1><strong>Test Test Headline home</strong></h1><em></em>
       <div class="headline"><p>Home1 Home1 Home1</p></div>
 </div>

 <div id="caption2" class="nivo-html-caption">
     <h1><strong>Test Test Headline 2 home</strong></h1> <em></em>    
       <div class="headline"><p>Home2 Home2 Home2</p></div>
 </div>

综上所述，当滚动首页时，div“ caption1”中“ h1”和“ p”标签之间的文本以及div“ caption2”中“ h1”和“ p”标签之间的文本将是唯一的到“主页”部分，但是例如如果滚动到空格部分，则文本将更改并且对于空格部分是唯一的。

提前致谢！

Answer 1

在小提琴的脚本中，您将看到以下行：

$('#date').html($(this).find('.description').text());

更改为：

$('#date').html($(this).find('.description').html());

这将克隆您提供的全部内容，而不仅仅是其中的文本。 然后，您将需要在HTML的每个部分中提供描述，并根据需要使脚本中的选择器适应html结构。

在您的情况下，您需要填充两个div，但这并没有太大的区别：

JS：

$('#caption1').html($(this).find('.description1').html());
$('#caption2').html($(this).find('.description2').html());

HTML

<section id="home">   
    content
    <div class="description1">content for caption1</div>
    <div class="description2">content for caption2</div>
</section>

不要使用<p> -Elements作为内容持有者。 如果它们包含其他HTML元素，它将无法正常工作。 只需使用<div> 。

这是一个例子： 小提琴

Answer 2

如果将单个类名用于结构之类的部分中的所有标题，则将其应用于具有不同标题长度的所有部分可能会更容易。

<section id="home">   
    content
    <div class="captions">
        <div class="nivo-html-caption">content for caption1</div>
        <div class="nivo-html-caption">content for caption2</div>
    </div>
</section>

然后通过以下方式将内容应用于侧面容器

$('#side-panel').html($(this).find('.captions').html());