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

Question

当用户滚动页面时，有什么方法可以让图像向上移动？我有 2 个方形图像（每个 400 像素的宽和高），两者都是可见的。左图是按位置固定的。右图位于左图下方 200 像素处。当我们滚动页面时，我需要使右图像向上移动 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.  
  })
})

Here's a JSFiddle with what I think you want.

只有一个布尔值来告诉我们图像何时排列。当它们是时，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 来链接图片的 transform: translateY() 属性和 scrollTop()。这有点难以用语言解释，但如果你提供一个 jsfiddle，我会告诉你我的意思。