视差图像滚动不起作用

Question

所以我试图获得一个具有视差滚动效果的图像，但它不起作用。知道为什么它不起作用吗？

$(function() {
// Cache the Window object
var $window = $(window);
// Parallax Backgrounds
// Tutorial: http://code.tutsplus.com/tutorials/a-simple-parallax-scrolling-technique--net-27641

$('section[data-type="background"]').each(function(){
        var $bgobj = $(this); // assigning the object
        $(window).scroll(function() {
            // Scroll the background at var speed
            // the yPos is a negative value because we're scrolling it UP!                              
            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 });
        }); // end window scroll
    });
});

https://jsfiddle.net/0382k30q/

Answer 1

您需要更改以下内容：

$('section[data-type="background"]').each(function(){...

到此：

$('div[data-type="background"]').each(function(){...

背景不会应用于剖面元素。它们应用于div元素。

另外，不要忘记在你的fiddles中包含JQuery/JQuery UI。

更新Fiddle：https://jsfiddle.net/0382k30q/7/