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

Question

有没有办法让用户滚动页面时图像向上移动？我有 2 个正方形图像(每个 400 像素的宽度和高度)，两者都是可见的。左图按位置固定。右图位于左图下方 200 像素处。当我们滚动页面时，我需要让右图向上移动 200px(与左图对齐)。然后它会停留在那个位置。

我发现此页面上的那个与我要创建的完全相同 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.

只有一个 bool 值可以告诉我们图像何时排列。如果是，image-2 的 CSS 属性“top”与窗口的 scrollTop 值相匹配。

bool 变量目前是硬编码的，以告诉我们图像何时排列(我查看了窗口排列时的 scrollTop 值，在本例中为 192)。这不是一个很好的方法，因为它不会考虑图像位置或大小的变化，但这应该足以开始了。

编辑

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

这是实现相同结果的另一种方法。只要第二张图片 position: fixed 没问题，那么它应该更有效率，并且有望避免 OP 所说的第一种方法发生的跳跃。

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

同样，这段代码的可重用性不是很好，但它应该可以在一次性情况下正常工作。如果有人想改进它，请这样做!