添加视差滚动时未定义Javascript $窗口

Question

我目前正在构建一个基于时间线的页面，其中包含不同的年份，因为这是一个包含大量信息的单页，我决定使用可用的paralax滚动效果，构建我的页面以下面的方式工作：

我添加了基于this教程的paralax滚动。但它不能按我想要的方式运作。

我创建了这个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 });
            });
        });
    });

但在滚动页面时继续收到以下消息：未捕获的ReferenceError：$ window未定义任何建议或帮助都将不胜感激。

Answer 1

更正$window至$(window)

Answer 2

试试这个：

$(document).ready(function () {

    // Cache the Window object
    $window = $(window);

    $('section[data-type="background"]').each(function () {
        var $bgobj = $(this); // assigning the object

        // Use the cached window object here
        $window.scroll(function () {

            // Use the cached window object here
            var yPos = -($window.scrollTop() / $bgobj.data('speed'));

            // Your code here
        });
    });
});

FIDDLE DEMO

Answer 3

您可以在.scroll

之外声明一个新变量

...
var $window = $(window);
$window.scroll(function () {
...

（因为您使用.scroll中的$window变量）