使用stellar.js停止视差

Question

我用的是stellar.js视差。

有没有办法让元素在某个位置停止使用这个插件？

当它达到300px的时候，不再有视差了吗？

谢谢..。

Answer 1

Stellar.js允许您编写position property plugins，它会改变滚动过程中元素的定位方式。

我不太确定你所说的“当它达到300px时”是什么意思，但是让我们看一个类似的例子来了解它是如何工作的。如果你想设置一个元素可以向下移动的限制，你可以编写一个插件，看起来像这样：

$.stellar.positionProperty.limit = {

  setTop: function($element, newTop, originalTop) {
    var limit = 300;

    // Check if we're going over the limit
    if (newTop - originalTop > limit) {

      // Call default position property with our limited value
      $.stellar.positionProperty.position.setTop.call(null, $element, originalTop - limit, originalTop);

    } else {

      // Otherwise, delegate to the 'setTop' method of the 'position' adapter
      $.stellar.positionProperty.position.setTop.apply(null, arguments);

    }
  },

  // Nothing custom needed here, so we'll just use the built in adapter:
  setLeft: $.stellar.positionProperty.position.setLeft

}

请注意，您还可以访问'setTop‘和'setLeft’函数中的元素(通过'$elem‘参数)，允许您为每个元素定制逻辑，这将允许您将元素定位在屏幕顶部，如果您想要的话。

现在，我们可以将新的'limit‘插件与Stellar.js结合使用，如下所示：

$.stellar({
  positionProperty: 'limit'
});