使用stellar.js停止視差

Question

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

是否有一種方法可以使元素停止在某個位置使用此插件？

當它到達頂部300像素再也不會視差是多少？

謝謝...

Answer 1

Stellar.js允許你寫position property plugins，這改變哪些元素滾動過程中定位的方式。

我不太清楚你的意思是「當它到達頂部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 

} 

請注意，您還可以使用該元素在「機頂盒」和「setLeft '函數（通過'$ elem'參數），允許您爲每個元素定製邏輯，這將允許您將元素置於屏幕頂部，如果這就是您以前的樣子。現在

，我們可以用我們的新的「限價」插件與Stellar.js像這樣：

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

Answer 2

你會如何將它轉換爲水平，我試着切換newTop爲newLeft，等等等等，但它似乎並沒有工作 - 這樣的動畫停止當他們到達，例如300像素左父