Question

我的网站上有5个部分，并且内部有2个div的固定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”标签之间的文本对于“home”部分将是唯一的，但是如果例如滚动空格部分，则文本将更改并且对于空间部分是唯一的。

提前致谢！

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> - 元素作为内容拥有者。如果它们包含其他HTML元素，它将无法工作。只需使用<div>代替。

以下是一个示例： Fiddle

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());

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

2 个答案: