jquery视差位置计算

我想对背景图像应用视差效果，背景图像可以定位在DIV中页面的任何位置

我试图找到“完美”的等式，以便在滚动文档时完全看到背景图像（从上到下），同时始终让图像完全填充DIV

最后，我只希望页面的中间有一个视差图像，它总是像图像高度和窗口高度一样工作。

这里是我的脚本（它可以工作，但我的计算没有完全考虑窗口高度和图像高度…）

$（“#内部容器”）。在（“滚动”，函数（）{
var scrollTop=$（this.scrollTop（）；
var windowHeight=$（window.height（）；
$（'.parallax container'）。每个（函数（）{
var parallaxDivPosition=$（this）.position（）.top；
var parallaxHeight=$（this）.height（）；
变量scrollPosition=scrollTop+窗口高度；
如果（视差dIVPosition=0）{
var视差系数=视差高度/窗高；
var parallaxShift=视差高*视差因子；
var parallaxImgPos=视差xdivPosition窗口高度；
var imagePosition=数学圆整（视差XIMPOS视差移位）*0.2；
$（this）.children（）.css（'-webkit transform'，'translate3d（0px'，+imagePosition+'px，0px'）；
}
})
})

---

这是一把小提琴：

我拿到了。最后很简单（在一张纸上写了两个方程式！！哈哈）

$（'*'）。滚动（函数（）{
var windowHeight=$（window.height（）；
$（'.parallax container'）。每个（函数（）{
var parallaxDivPosition=$（this）.position（）.top；
var parallaxHeight=$（this）.height（）；
var parallaxTop=视差xDIVPOSITION-窗高；
var parallaxBottom=视差高度+视差位置；
如果（视差上限<0&&视差下限>0）{
var视差因子=50/（窗高+视差高）；
var视差位置=数学abs（视差X阶）*视差系数；
$（this.children（）.css（'-webkit transform'，'translate3d（0px'，+-parallaxposition++'，0px）'）；
}
})
})

因此，当底部div图像背景位于窗口顶部时，我将看到图像的底部。当顶部div图像背景位于窗口底部时，我将看到图像的顶部

所以无论图像的高度或窗口的高度，当我滚动时，我总是会显示整个图像

$("#inner-container").on("scroll", function() {
    var scrollTop = $(this).scrollTop();
    var windowHeight = $(window).height();
    $('.parallax-container').each(function() {
        var parallaxDivPosition = $(this).position().top;
        var parallaxHeight = $(this).height();
        var scrollPosition = scrollTop + windowHeight;
        if (parallaxDivPosition <= windowHeight && parallaxDivPosition+parallaxHeight >= 0) {
            var parallaxFactor = parallaxHeight/windowHeight;
            var parallaxShift = parallaxHeight*parallaxFactor;
            var parallaxImgPos = parallaxDivPosition-windowHeight;
            var imagePosition = Math.round(parallaxImgPos-parallaxShift)*0.2;
            $(this).children().css('-webkit-transform', 'translate3d(0px, '+imagePosition+'px, 0px)');
        }
    })
})

$('*').scroll(function() {
    var windowHeight = $(window).height();
    $('.parallax-container').each(function() {
        var parallaxDivPosition = $(this).position().top;
        var parallaxHeight = $(this).height();
        var parallaxTop = parallaxDivPosition - windowHeight;
        var parallaxBottom = parallaxHeight + parallaxDivPosition;
        if (parallaxTop < 0 && parallaxBottom > 0) {
            var parallaxFactor = 50/(windowHeight+parallaxHeight);
            var parallaxposition = Math.abs(parallaxTop)*parallaxFactor;
            $(this).children().css('-webkit-transform', 'translate3d(0px, '+-parallaxposition+'%, 0px)');
        }
    })
})