作为Slim中元素属性一部分的内联Javascript变量

背景：

我使用该插件作为Rails项目的一部分，该项目使用Slim进行标记。 该插件要求滚动动画的起点和终点具有数据属性。以下是一个例子：

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

该插件基本上将

top

css从

data-0

（滚动位置0px）设置为

data-1180

（滚动位置1180px）

问题：

页面上需要设置动画的一些元素位于高度不同的容器下方。因此，根据前面容器中的内容，

数据xxxx

可能会有所不同。我有一个javascript函数，它计算出前面所有元素的高度，并返回

data xxxx

应该是什么的变量。从理论上讲，这就是Slim中的输出应该是什么样子：

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

#logo.unit data-#{“logoPosition”}=“top:5px”data-#{“logoPosition+200”}=“top:-8px；”

微小的错误。无论我如何尝试添加内联javascript属性，它都会出错。我当前的解决方案是全部javascript（它完全替换了属性）。但是，我想知道内联javascript生成属性的正确方法

---

可能吗？

如果我理解正确，您可以单独使用skrollr。阅读有关相对模式的文档

就像这样（你明白了）：

---

使用

data-anchor-target=“#logo.unit”

你甚至可以根据logo的位置设置其他元素的动画。

使用jQuery你可以说

$（'#logo.unit'）.data（'1180'，'top:0px；'））

或者其他什么？是的，这就是我目前拥有的：

$（'element'）.data（relativePos，'top:0px；'）。但是，我只想在标记中输出变量。这将使每个元素的运行js代码大小减少一行。如果您仍然希望使用js，那么在其他地方使用js可能更干净、更高效、更具语义。如果您想这样内联执行，也许服务器端脚本更适合您？当然，这只是我的观点，我同意，明白你的意思。我考虑了一个服务器端脚本；但是，问题是滚动器动画是基于滚动位置完成的。根据监视器尺寸和元件流量，一旦所有元件完成加载，需要在客户端计算位置。这只是其中一种情况，所有“适当”的方法都被用尽了，然后才转向黑客方法。哇，我不敢相信我在文档中错过了这一点！很高兴普林松自己也参与进来。。非常感谢。每个元素是否可能有2组相对数据锚？如果徽标在滚动过程中需要移动两次-在它通过第一部分和第二部分之后？不确定你的意思。您可以有任意多个关键帧，但只能有一个
数据锚定目标
#logo.unit data-top="top:5px" data-200-top="top:-8px;"