让我们说我有一个距离页面顶部1000px的元素，如果我给他这个属性data-300-top="background: brown;"我会认为当我粗略滚动时它会变成棕色背景700px（所以它距视口顶部300px）。但由于某种原因，它立刻变成棕色。
奇怪的是，当我把第二个属性放在那里时，例如
data-100-top="background: green;"
data-200-top="background: brown;"
它立即变成棕色，但是当我滚动时变为绿色，因此元素距视口顶部100px。
我根本不理解。它有点不一致吗？如果这是预期的行为，我该怎么做才能只在满足条件时触发？
这里是bg立即设置的示例 http://jsbin.com/neqolu/1/edit?html,output
这里第二个attr工作正常 http://jsbin.com/kalora/1/edit?html,output