0

我的网站上有 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”标签之间的文本将是唯一的到“主页”部分，但如果例如滚动到空间部分，文本将改变并且对于空间部分是唯一的。

提前致谢！

4

2 回答 2

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 元素，它将不起作用。只需使用 a<div>代替。

这是一个例子：Fiddle

于 2013-08-17T14:23:08.053 回答
0

如果您对一个部分中的所有标题使用单个类名，则可能更容易将其应用于具有不同标题长度的所有部分，例如

<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());
于 2013-08-17T15:06:42.317 回答