使用stellar.js停止视差

Question

我使用的是stellar.js视差…

是否有一种方法，使元素停止在一个特定的位置使用这个插件?

当它到达顶部300px时不再视差了吗?

谢谢…

Answer 1

Stellar.js允许你编写位置属性插件，这些插件可以改变元素在滚动时的位置。

我不太确定你说的"当它到达顶部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'参数)，允许你自定义每个元素的逻辑，这将让你的目标元素在屏幕的顶部，如果这是你所追求的。

现在，我们可以在Stellar.js中使用新的'limit'插件，如下所示:

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