Question

我有多个部分显示不同的背景，每个部分都有一个基本的视差背景图像。由于背景高度不同，一旦到达图像底部，我似乎无法弄清楚如何停止背景图像位置。

如果offset().top部分等于或大于$(window).scrollTop()，则背景位置更改开始。

似乎btmOffset不正确，但我看不出原因。

非常感谢任何帮助。

到目前为止我有什么

$window = $(window);
var winWid = $window.width();
$('.portfolioSection').each(function(){
        var $bgobj = $(this);
        var speed = 2.4;
        var bg = $(this).css('background-image').replace('url("','').replace('")','');
        var tmpImg = new Image();
        tmpImg.src = bg;
        var orgW = tmpImg.width;
        var orgH = tmpImg.height; 
        var imgResizedRatio = winWid/orgW;
        var resizedH = orgH * imgResizedRatio;
        var btmOffset =  (resizedH - $(this).height()) + $bgobj.offset().top;
        $(window).scroll(function() {
            if($(window).scrollTop() > $bgobj.offset().top && $(window).scrollTop() < btmOffset){
                var yPos = -(($window.scrollTop()-$bgobj.offset().top) / speed); 
                var coords = '0 '+ yPos + 'px';
                $bgobj.css({ backgroundPosition: coords });
            } else if($(window).scrollTop() < $bgobj.offset().top) {
                $bgobj.css({ backgroundPosition: '0 0' });
            } else {
                $bgobj.css({ backgroundPosition: '0 '+resizedH+'px' });
            }
        }); 

    });

Answer 1

orgH和orgW在执行时将为0，因为您正在创建新的图像异步，同时执行代码同步：< / p>

var tmpImg = new Image();
tmpImg.src = bg;
//...

这意味着，您必须使用onload事件（也可能涵盖onerror事件），如下所示：

tmpImg.onload = function(ev) {
    var orgW = tmpImg.width;
    var orgH = tmpImg.height; 
    //and the rest of your code...
}

这是非常低效的，因为您再次加载所有这些（大）图像。我会为每个.portfolioSection添加数据属性，例如data-bgmaxscroll="1000"（图像的高度）。

这会有点硬编码，但我认为这是最简单，最高效的方式。

如果滚动超过bg图像大小，则视差停止背景图像pos更改

1 个答案: