Javascript 视差背景在窗口计算中的位置

有人能帮我做一个简单的功能吗，但现在让我把头发拔出来了

我正在使用一个相当简单的jQuery块，它绑定到WindowScroll函数。我相信我有所有的变量，我需要让这个工作，但它似乎没有。我的数学似乎不够好

我很抱歉由于没有声誉而无法附加图像！我拥有的变量有：浏览器窗口（x）、具有滚动背景图像的div高度（y）、背景图像高度（z）以及div顶部到浏览器窗口顶部的滚动位置（o）

div的背景位置需要相对于窗口中div的位置移动，以便从浏览器窗口的div从上到下滚动（反之亦然）时可以看到整个图像

我的计算如下：-

x+y gives me the whole range of movement the div will require to cover 
from it first being visible to it finally leaving the screen.

z-y gives me the range of movement the background image will require to 
cover for the whole image to scroll through the div as the div scrolls
through the browser window.

(z-y)/(x+y) gives me the number of pixels the background image has to 
move for every 1 pixel the browser window will scroll.

As an example,
x = 200
y = 50
z = 150
o starts at -50 and ends at 200

x+y = 250 (full div movement)
z-y = 100 (bg image movement)
(z-y)/(x+y) = 0.4 bg movement per pixel scrolled

因此，当div位置从-50一直滚动到200时，bg图像需要从0滚动到-100

我不知道如何把最后几根线连在一起。有人能帮我把这些数字联系起来吗

提前谢谢，如果这听起来很愚蠢，我很抱歉

标记

这是我最后的密码，感谢文森特和罗布的帮助。对于任何大小的区域，使用data type=“background”可以进行视差滚动。速度将由浏览器高度和背景图像大小决定。再次感谢各位

$(function(){
        $(window).bind('scroll', function() {
            $window = $(window);
           $('section[data-type="background"]').each(function(){
            var $bgobj = $(this);
            var windowHeight = 0;
                windowHeight = document.body.clientHeight;
            var img = new Image;
                img.src = $(this).css('background-image').replace(/url\(|\)$/ig, "");
            var bgImgHeight = parseInt(img.height);
            var divHeight = parseInt($(this).css('height'));
            var scrollPos = $(this).position().top - $window.scrollTop();
                var bgMovement = bgImgHeight - divHeight;
                var scrollMovement = windowHeight + divHeight;
                var intPos = scrollPos + divHeight;
                var yPos = ((bgMovement) / (scrollMovement)) * intPos;
                var coords = '50% '+ (-yPos) + 'px';
                $bgobj.css({ backgroundPosition: coords });
            });
        });
    }); 

---

使用imgWindow作为包含图像的div，类似的内容应该是 好:

//获取最大窗口滚动
var deseapearPos=$（窗口）.height（）-$（'imgWindow'）.offset（）.top；
var imgWindowHeight=（“#imgWindow”）.height（）；
var图像高度=500；
$（窗口）。滚动（函数（）{
var currWinPos=$（window.scrollTop（）；
如果（currWinPos

---

（imgwindowcss样式有一个溢出：scroll）

使用imgWindow包含图像的div，类似的内容应该是 好:

//获取最大窗口滚动
var deseapearPos=$（窗口）.height（）-$（'imgWindow'）.offset（）.top；
var imgWindowHeight=（“#imgWindow”）.height（）；
var图像高度=500；
$（窗口）。滚动（函数（）{
var currWinPos=$（window.scrollTop（）；
如果（currWinPos

---

（imgwindowcss样式有一个溢出：滚动）

我看不出这里有什么问题。想做就做您已经完成了所有计算：钩住事件，进行数学运算，更改正确项目的.style.pos，如果需要，防止默认或stopPropagation，您就完成了。嗨，Vincent，感谢您的回复。我知道，你会认为我什么都有。我可以让一切都动起来，但它有点不同步，这是最后一点数学。当div从-50（到200）开始，bg从0（到-100）开始时，如何使bg位置移动正确的距离？我的数学缺了点什么？顺便说一句，这些数字都是虚构的，因为它们都是动态计算的。对不起，我说不通。你还没有解释你想做什么。是否希望图像顶部和div在视图端口底部对齐，然后当div滚动到顶部时，在div离开视图端口顶部时对齐底部（反之亦然）？您还需要显示完整的计算结果，其中考虑了div与文档顶部的距离。谢谢Rob。是的，这就是我需要做的。这是到目前为止我的代码，但yPos计算过于令人担忧，Rob，没有意识到我不能再次使用代码。。。这里只处理jquery代码，我看不出有什么问题。想做就做您已经完成了所有计算：钩住事件，进行数学运算，更改正确项目的.style.pos，如果需要，防止默认或stopPropagation，您就完成了。嗨，Vincent，感谢您的回复。我知道，你会认为我什么都有。我可以让一切都动起来，但它有点不同步，这是最后一点数学。当div从-50（到200）开始，bg从0（到-100）开始时，如何使bg位置移动正确的距离？我的数学缺了点什么？顺便说一句，这些数字都是虚构的，因为它们都是动态计算的。对不起，我说不通。你还没有解释你想做什么。是否希望图像顶部和div在视图端口底部对齐，然后当div滚动到顶部时，在div离开视图端口顶部时对齐底部（反之亦然）？您还需要显示完整的计算结果，其中考虑了div与文档顶部的距离。谢谢Rob。是的，这就是我需要做的。这是到目前为止我的代码，但yPos计算过于令人担忧，Rob，没有意识到我不能再次使用代码。。。这里有一个jquery代码，谢谢Vincent。我下班后会试试的。谢谢文森特。虽然你给我的东西并没有完全满足我的需要，但它确实让我更多地思考了div的偏移量和窗口高度，所以你的答案是正确的！我的代码可能效率不高，但这是一个很好的起点。再次感谢。很高兴我能帮忙！别忘了把你的div放在一个包装div里面以隐藏滚动条！就像这里解释的：谢谢文森特。我下班后会试试的。谢谢文森特。虽然你给我的东西并没有完全满足我的需要，但它确实让我更多地思考t

// get the maximum window scroll   
var deseapearPos =  $(window).height() - $('#imgWindow').offset().top;
var imgWindowHeight=('#imgWindow').height();
var imageHeight = 500;

$(window).scroll(function() {
    var currWinPos = $(window).scrollTop();
    if (currWinPos < deseapearPos ) {  
         // if imageWindow still on sight
         var newPos = /* your computation here */
 // ( smthg like newPos = ( imageHeight - imgWindowHeight ) * (currWinPos/ deseapearPos ) );
           $('#imgWindow').scrollTop(newPos);
     }
 });