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'参数），允许您自定义每个元素的逻辑，这样您就可以将元素定位在顶部屏幕，如果这就是你所追求的。

现在，我们可以像Stellar.js一样使用新的'limit'插件：

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

Answer 2

你如何将它转换为水平，我已经尝试将newTop转换为newLeft等等，但它似乎不起作用 - 因此当动画到达时动画停止，例如父母的剩余300px

使用stellar.js停止视差

2 个答案: