根据容器div在浏览器窗口中的位置移动绝对定位的图像

Question

我有一个相对位置的div（div 1）。它包含一个绝对位置的图像（显示为绿色块），默认情况下隐藏在浏览器窗口的左侧。

我想这样做，当div 1位于浏览器窗口的中心时，当用户向下滚动时，图像会从左侧稍微移动并出现在屏幕上。当用户开始向下滚动到div 1时，我希望图像移回原来的屏幕外位置。

我附上了一张图片，试图让它更有意义。

我觉得这可以使用JavaScript或jQuery，但我不知道如何。任何帮助将不胜感激。

伊恩

Answer 1

您需要将处理程序绑定到窗口的scroll事件，并测量用户滚动页面的距离比例 - 然后相应地定位图像。我建了一个rough prototype;你应该能够调整大小和位置，使它适合你。

原型的JS依赖于上面链接的JSFiddle中的HTML和CSS，如下所示：

var $main = $('.main');
var $tgt = $('.targetMover');
var origLeft = $tgt.position().left;
var maxLeft = 200;

$main.scroll(function(ev){
    var ratio = $main[0].scrollTop / $main[0].scrollHeight;
    var newLeft = origLeft + ( (maxLeft - origLeft) * ratio);
    $tgt.css({left:newLeft});
});

Answer 2

您可能希望将图像定位在滚动上。您基本上会检查div的位置，将图像的顶部设置为与div相同，并将左侧设置为您喜欢的任何位置。你可以使用jquery animate来使它“移动”到那个位置。然后，您必须设法执行scrollstop事件（不存在），并再次隐藏图像。有关scrollstop实现，请参阅：http://james.padolsey.com/javascript/special-scroll-events-for-jquery/（摘自以下帖子）。

您可能需要阅读jQuery - fadeOut on Scroll / fadeIn on "scrollstop"