Stellar.js背景不滾動

Question

我正在嘗試使用Stellar.js腳本應用視差效果。

這是Mark Dalgleish網站http://markdalgleish.com/projects/stellar.js/demos/backgrounds.html上的官方示例

即使我復制並粘貼示例中的源代碼，它們也不會固定滾動顯示在每個圖像上，而是對每個圖像都有輕微的滾動效果。

我究竟做錯了什么？

Answer 1

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

2.如果路徑正確，請檢查是否對星體進行了初始化，在頁面加載時運行，還是為正確的元素賦予了“ data-stellar-background-ratio”屬性。 如果您將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>

Answer 2

我遇到的情況是，直到調整瀏覽器窗口的大小后，我的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');

}]);

Stellar.js背景不滾動

問題描述

2 個解決方案

解決方案1
1 已采納 2014-04-19 15:16:10

解決方案2
0 2015-06-28 16:12:39

Stellar.js背景不滾動

問題描述

2 個解決方案

解決方案1 1 已采納 2014-04-19 15:16:10

解決方案2 0 2015-06-28 16:12:39

解決方案1
1 已采納 2014-04-19 15:16:10

解決方案2
0 2015-06-28 16:12:39