Stellar.js背景不滾動

我試圖使用Stellar.js腳本來應用視差效果。Stellar.js背景不滾動

這裏是馬克達格利什網站上的官方例子 http://markdalgleish.com/projects/stellar.js/demos/backgrounds.html

即使當我複製和源代碼示例中粘貼，而不是有輕微的滾動效應，每一個形象，他們出現在固定的位置。

我在做什麼錯？

來源

2014-04-19 user3525989

1. 如果即使Demo代碼不起作用，請檢查您是否正確提供了jquery或stellar.js路徑。如果您有任何錯誤，您可以在瀏覽器控制檯中檢查它。如果無法加載資源，控制檯將打印它。

2. 如果路徑正確，檢查是否運行恆星的初始化，載入頁面時，或者如果您爲正確的元素提供了「data-stellar-background-ratio」屬性。如果您將數據恆星背景比設置爲0，則它不會滾動。請注意，它也不適用於移動設備。

3. 如果您檢查了上述所有內容，但它仍然無效，請嘗試在元素末尾插入腳本。有時它有幫助。事情是這樣的：

<html> 
    <head> 
    <!-- Title, CSS, and other stuff --> 
    </head> 
    <body> 
    <!-- Content here with right stellar attributes -- > 
    ... 

    <!-- At the end of body load the scripts, and run initialisation --> 
     <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> 
     <script src="YOUR_PATH_TO_STELLAR/jquery.stellar.min.js" type="text/javascript"></script> 

     <script type="text/javascript"> 
     $(window).stellar({ 
     scrollProperty: 'scroll', 
     horizontalScrolling: false, 
     positionProperty: 'position' 
     }); 
     </script> 

    </body> 
    </html>

來源

2014-04-19 15:16:10 danieltmbr

可能是第三點。所有工作歡呼！ – user3525989

我有一個情況我stellar.js視差滾動將無法使用，直到我的瀏覽器窗口大小被調整。我發現$.stellar('refresh');似乎解決了這個問題。（使用AngularJS）

angular.module('ForeverLeather').controller('HomeCtrl', ['$scope', function($scope) { 

    $(window).stellar({ 
    horizontalScrolling: false, 
    verticalOffset: 0, 
    horizontalOffset: 0, 
    responsive: true, 
    }).stellar('refresh'); 

}]);

來源

2015-06-28 16:12:39 SuperVeetz

Stellar.js背景不滾動

回答

相關問題