4

背景:

我正在使用skrollr插件作为 Rails 项目的一部分,该项目使用 Slim 进行标记。该插件需要滚动动画的起点和终点的数据属性。这是一个例子:

#canvas-1 data-0="top:-80px;" data-1180="top:0px;"

该插件基本上会将topcss从data-0(滚动位置0px)动画到data-1180(滚动位置1180px)。

问题:

页面上一些需要动画的元素位于具有不同高度的容器下方。因此,data-xxxx根据前面容器中的内容,可能会有所不同。我有一个 javascript 函数,它计算出所有前面元素的高度并返回一个data-xxxx应该是什么的变量。理论上这就是 Slim 中的输出应该是这样的:

#logo.unit data-#{ "<script>logoPosition</script>" }="top:5px" data-#{ "<script>logoPosition + 200</script>" }="top:-8px;"

苗条的错误。无论我如何尝试添加内联 javascript 属性 - 它都会出错。我目前的解决方案是所有的 javascript (它完全取代了属性)。但是,我想知道内联 javascript 生成属性的正确方法。

可能的?

4

1 回答 1

1

如果我对您的理解正确,您可以单独使用 skrollr 执行此操作。阅读有关相对模式的文档 https://github.com/Prinzhorn/skrollr#absolute-vs-relative-mode

像这样(你明白了):

#logo.unit data-top="top:5px" data-200-top="top:-8px;"

使用data-anchor-target="#logo.unit"你甚至可以让其他元素的动画取决于徽标的位置。

于 2013-11-12T07:50:54.223 回答