Skrollr。更改固定div中的内容

Question

我想知道如何在http://www.squarespace.com上实现这种效果。我的意思是：

• 向下滚动，计算机显示器的图像一度停留在固定位置
• 之后，滚动时图像会不断变化。

如何使用Javascript控制内容和更改CSS？它应该在窗口滚动事件：

window.onscroll = function () {
    // but I don't know what to use here
}

在较小的浏览器宽度下，上述元素成为旋转木马，但我对此不感兴趣。

Answer 1

由于此帖子上的标记，我将假设此问题与skrollr library

有关。

Skrollr通过HTML数据属性进行控制。当显示器滚动，然后固定在给定位置时，您所看到的内容称为＆＃34;固定＆＃34;。如何在Skrollr中定义数据属性一开始可能会让人感到困惑，但一旦理解了这一点，图书馆就会成为一个梦想。

我在我的第一个skrollr项目的前几周打印并将Petr Tichy's cheat sheet固定在我的显示器旁边。

Skroller的固定示例将如下完成：

<div id="example"
     data-100-top="position:fixed;"
     data-anchor-target="#example">

   These words are pinned 100px from the top of the screen      

</div>

Skrollr的目的是确实不需要jQuery / JavaScript的知识。 css由库操纵，并在数据元素中定义。上面的示例显示将位置更改为固定，但如果您希望div从顶部扩展100px，您可以在那里输入宽度/高度css参数，或者只是输入您喜欢的任何其他CSS。

如果你正在寻找一个更强大的skrolling库，其中jQuery知识更多是一个要求，我建议你看看ScrollMagic（我缺乏声誉阻止我链接到scrollmagic）。