0

私は体に3つのdivを持っています：

<body>
  <div id="wrap">
    <div id="a"></div>
    <div id="b"></div>
    <div id="c"></div>
  </div>
</body>

私が理解したいのは、「＃b」が他の2つよりも速くスクロールすることです。それでおしまい。

だから私は次のようなコードを書きます（それからマークの提案に従ってそれを修正します）：

<script>
   $(document).ready(function(){
      $(window).stellar();
   });
</script>

<style>
   #wrap{overflow:hidden;}
</style>

  ...
<body>
  <div id="wrap">
     <div id="a" data-stellar-ratio="1"></div>
     <div id="b" data-stellar-ratio="2"></div>
     <div id="c" data-stellar-ratio="1"></div>
  </div>
</body>

しかし、結果はひどいです。ページ全体の一番下までスクロールすることはできません。

#bがウィンドウの上部に到達するたびに、ページ全体が上部に実行されます（このページを最初に実行したときに表示されるのと同じように）

stellar.jsサイトの紹介が何を意味するのかまだ理解していないと思います。

私を助けてください。

4

1 に答える 1

8

編集：あなたの例がどのように機能するかを示すために、JSFiddleでデモを作成しました。

現在、スクロール要素を指す必要がある場合は、「body」に対してStellar.jsを使用しています。ほとんどの場合、これは「ウィンドウ」です。また、ドキュメントの準備が整うまで、Stellar.jsを使用することはできません。

したがって、JavaScriptを次のように変更する必要があります。

$(document).ready(function() {
    $(window).stellar();
});

jQueryには$（document）.readyの省略形があり、Stellar.jsには$（window）.stellarの省略形があるため、次のように記述することもできます。

$(function() {
    $.stellar();
});

うまくいけば、これはあなたのために物事をクリアするはずです。

于 2012-11-16T00:00:01.793 に答える