Question

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

当图像排成一行时，只需要一个布尔值来告诉我们。当他们是，图像2的CSS属性＆＃39;顶部＆＃39;与窗口的scrollTop值匹配。

布尔变量目前是硬编码的，告诉我们图像排列的时间（我查看了窗口的排队时的scrollTop值，在这种情况下为192）。这不是一个很好的方法，因为它不会考虑到图像的变化＆＃39;职位或规模，但这应该足够了。

修改

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

这是实现相同结果的另一种方法。只要让第二个图像position: fixed正常，那么它应该更有效率，并且有希望避免跳过那个用第一种方法发生的OP。

它定位于image-2的top CSS属性，并将其与window.scrollTop值匹配，直到image-2到达必要的点。

同样，这段代码不是非常可重复使用，但它应该适用于一次性情况。如果有人想改进它，请这样做！

Answer 2

听起来你需要使用jQuery链接图片的transform：translateY（）属性和scrollTop（）。用文字解释有点难，但如果你提供一个小提琴，我会告诉你我的意思。

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

2 个答案: