2

過去 3 時間、skrollr に何かを見せようとしてきました! ヘッダーの本文の前にスクリプトを呼び出してみました。スクリプトを機能させるためにたくさんのチュートリアルを試しましたが、まったく機能しない理由がわかりません。

<head>私が持っている

<script type="text/javascript" src="js/skrollr.min.js"></script>
<script type="text/javascript" src="js/go-skrollr.js"></script>

@melc に従って、いくつかの変更を加えました。以下が主なものです。まだ運がありません。

(function() {
    $(document).ready(function(){skrollr.init();});
})();

そして、私の要約行（navのすぐ下のdiv）には

<div class="container" data-center="opacity: 1" data-200-top="opacity: 0" data-anchor-target="#summary h3">

私の知る限り、これにより、h3 が上から 200 ピクセルになると、そのコンテナー内のコンテンツが消えるはずです。

私はそれをさまざまな方法で呼んでみましたが、まだ運がありません!

ライブサイト

4

1 に答える 1

2

この時点で 3 つの問題があり、修正すると実際に表示されますSkrollr.js(これは OP で指定されたサイトでテストされ、機能します)。

問題 1 -data-anchor-target="#summary h3"を変更する必要がありますdata-anchor-target=".summary h3"

問題 2 -何らかの理由での初期化後に高さが 6k ピクセルに達するため、.hero要素に を含めないでください。後で調べることができます。height:100%skrollr

問題 3 - の適切な初期化をskrollr行う必要があります。現在、コンソールにメッセージUncaught ReferenceError: $ is not definedが表示され、go-skrollr.jsファイルが参照されています。これは、jQueryライブラリ ファイルを参照する前にライブラリ ファイルをインクルードする必要があるためskrollr.jsです。

于 2014-03-16T15:47:58.643 に答える