3

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

在此处输入图像描述

我根据本教程添加了视差滚动。但它并没有按照我想要的方式运行。

我创建了这个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任何建议或帮助将不胜感激。

4

3 回答 3

8

更正$window_$(window)

于 2013-05-23T07:19:20.990 回答
4

试试这个：

$(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
        });
    });
});

小提琴演示

于 2013-05-23T07:23:14.217 回答
3

您可以在 .scroll 之外声明一个新变量

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

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

于 2013-05-23T07:20:53.327 回答