用户滚动页面时如何触发图像移动？

Question

用户滚动页面时，有什么方法可以使图像向上移动？ 我有2张方形图片（每张图片的宽度和高度均为400像素），都可见。 左侧图像按位置固定。 右图位于左图下方200px。 滚动页面时，我需要使右图像向上移动200像素（与左图像对齐）。 然后它仍然保持在该位置。

我发现此页面上的内容与我尝试创建的内容完全相同http://jessandruss.us/#waiting区别在于我的图像全部可见，而在此页面上，左侧图像的溢出被隐藏了当用户向上滚动时，它将恢复到其原始位置。

非常感谢您对此事的任何帮助。 谢谢。

Answer 1

$(document).ready(function(){
  var aligned = false; // A flag to tell us when the images are aligned
    $(window).scroll(function(){ 
    if($(this).scrollTop() == 192 ) { // when the window scroll to the alignment point... 
        aligned = true; // the images are aligned
    }
    if (aligned) { // if they're aligned... 
        $(".image-2").css("top", 8 + $(this).scrollTop()) // match .image-2's top css property
    }                                                   // to the window's scrollTop value, +
                                                        // 8px for the body's margin.  
  })
})

这是JSFiddle，提供了我认为您想要的东西。

当图像对齐时，只有一个布尔值告诉我们。 如果是，则image-2的CSS属性“ top”与窗口的scrollTop值匹配。

当前对布尔变量进行了硬编码，以告诉我们何时排列图像（排列时我查看了窗口的scrollTop值，在这种情况下为192）。 这不是一个好方法，因为它不会考虑图像位置或大小的变化，但这应该足以解决问题。

编辑

https://jsfiddle.net/eLdo0s3w/5/

这是获得相同结果的另一种方法。 只要具有第二个图像position: fixed ，那么它应该会更有效率，并有望避免OP所说的第一种方法发生的跳跃。

它以image-2的top CSS属性为目标，并将其与window.scrollTop值匹配，直到image-2达到必需的点为止。

同样，此代码不是很可重用，但是对于一次性情况，它应该可以正常工作。 如果有人想改进它，请这样做！

Answer 2

听起来您需要使用jQuery链接图片的转换：scrollY（）属性与scrollTop（）。 用语言很难解释，但是如果您提供jsfiddle，我将告诉您我的意思。