我试图了解Skrollr javascript脚本库,并且难以理解数据值以及它们在绝对值和相对值之间的区别。

我在div上有一个背景图片(比div高2倍),我想在向下滚动页面时向下滚动。这是我到目前为止所拥有的。

<div id="jumbotron" data-top="background-position: right bottom;" data-bottom="background-position: right top;" >


什么是数据顶部和数据底部?从文档中可以看出,data-top是div #jumbotron的顶部。我想要的是,当#jumbotron在视口的顶部时,背景位置在右下角。然后,当我滚动并使#jumbotron的底部到达视口的顶部时,我希望背景图像位于右上方。这没有发生。我究竟做错了什么?

最佳答案

skrollr库将根据其数据元素在元素上转换CSS。例如,如果您具有如下元素:

<div id="element" data-0="opacity: 1" data-100="opacity: 0"></div>


在滚动位置0(用户尚未滚动)时,该元素的不透明度为1。一旦用户向下滚动页面100px,该元素将逐渐变为不透明度0。您可以添加任意数量的数据增量喜欢。

关于数据顶部,skrollr repo上的自述文件指出:


  data-top:当元素的顶部与顶部对齐时
  视口


但是,我在文档中看不到有关数据底部的任何信息。我只看到:


  data-top-bottom:当元素的底部在视口的顶部时(不可见)。


因此,您可以尝试:

<div id="jumbotron" data-top="background-position: right bottom;" data-top-bottom="background-position: right top;" >


只需考虑第一个数据是您的起点,最后一个数据是您的终点,就可以根据需要增加数量。

09-25 19:46
查看更多