当前位置：文江博客话题详情

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

发布于 2024-11-28 03:11:26 字数 337 浏览 1 评论 0原文

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

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

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

在此处输入图像描述

我感觉使用 JavaScript 或 jQuery 是可能的，但我不确定如何实现。任何帮助将不胜感激。

伊恩

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

未蓝澄海的烟 2024-12-05 03:11:26

您需要将处理程序绑定到窗口的 scroll 事件，并测量用户向下滚动页面的距离的比率 - 然后相应地定位图像。我构建了一个粗略原型；您应该能够调整大小和位置以使其适合您。

原型的 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});
});

You'll want to bind a handler to the scroll event of the window, and measure the ratio of how far down the page the user has scrolled - then, position the image accordingly. I built a rough prototype; you should be able to tweak sizes and positions to make it work for you.

The JS for the prototype, which depends on the HTML and CSS in the JSFiddle linked above, is as follows:

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});
});

回复收藏 0 原文

给不了的爱 2024-12-05 03:11:26

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

您可能想通读jQuery - 滚动时淡出/“滚动停止”时淡入< /a>

回复收藏 0 原文

~没有更多了~