jQuery视差背景图像在第一次滚动时跳过

时间:2015-09-25 14:15:30

标签: jquery scroll parallax

我在我的网站中实现了一个简单的jQuery视差脚本。当一个div有类' parallax'以下数据data-type="background" data-speed="8"处理视差运动的脚本将起作用。

我的问题是,当页面加载时,在第一次滚动时,背景图像会跳转。有办法解决这个问题吗?

这是我的jQuery代码:

jQuery(document).ready(function($){
    var $window = $(window);
    var $containerHeight = $('section[data-type="background"]').height();

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

        var $bgobj = $(this);
        $(window).scroll(function() {
            var yPos = -($window.scrollTop() / $bgobj.data('speed'))-($containerHeight/2); 

            // Put together our final background position
            var coords = '50% '+ yPos + 'px';

            // Move the background
            $bgobj.css({ backgroundPosition: coords });
        }); 
    });    
});

http://jsfiddle.net/evpt5m2d/9/

0 个答案:

没有答案