jquery - 使用 stellar.js 停止视差

Question

我正在使用 stellar.js 视差...

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

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

谢谢...

Answer 1

Stellar.js 允许您编写位置属性插件，它可以改变滚动期间元素的定位方式。

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

$.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 中使用我们的新“限制”插件：

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