私は現在、さまざまな年の時系列ベースのページを作成しています。これは多くの情報を含む単一のページであるため、次の方法で動作するようにページを作成するために、利用可能な視差スクロール効果を使用することにしました。
このチュートリアルに基づいて視差スクロールを追加しました。しかし、それは私が望むようには機能しません。
私はこのFiddleを作成して、私がやりたいことを試して実証しました。
チュートリアルと同じ JS を使用します。
$(document).ready(function () {
$('section[data-type="background"]').each(function () {
var $bgobj = $(this); // assigning the object
$(window).scroll(function () {
var yPos = -($window.scrollTop() / $bgobj.data('speed'));
// Put together our final background position
var coords = '50% ' + yPos + 'px';
// Move the background
$bgobj.css({ backgroundPosition: coords });
});
});
});
しかし、ページをスクロールすると、次のメッセージが表示され続けます: Uncaught ReferenceError: $window is not definedアドバイスや支援をいただければ幸いです。