当用户到达 div#ID + 时淡入图像再过 n 个像素后再次淡出
我目前正在为网站制作一页布局。页面的每个部分都有一个相应的“主题”徽标，我希望当用户到达该位置时 jQuery 使其淡入淡出。当进一步移动一定数量的像素（例如向上或向下 100 像素）时，图像应该再次淡出。有没有简单的方法可以做到这一点？每个 div 的高度不是固定的（CMS 在其后面），所以我不能只使用从顶部开始的固定 px 值或其他值。当然，如果您进一步向下/向上移动到任何其他 div，图像应该像最初一样淡入。
这是我的示例代码
<div role="main">
<div id="first"><img … />content…</div>
<div id="second"><img … />content…</div>
<div id="third"><img … />content…</div>
</div>
I am currently working on a one-page layout for a website. Each section of the page has a corresponding 'topic' logo which I would like to have jQuery fade it in when the user reaches the position. When moving further a certain amount of pixels (like 100px up or down) the image should fade out again. Is there an easy way to do this? The height of each div isn't fixed (CMS behind it), so I couldn't just go with a fixed px amount from the top or something. Of course, if you move further down/up to any of the other divs the images should fade in as in the first place.
Here's my example code
<div role="main">
<div id="first"><img … />content…</div>
<div id="second"><img … />content…</div>
<div id="third"><img … />content…</div>
</div>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
如果我理解正确，这里有一个您正在寻找的内容的快速演示：
那里没有图像，只有彩色 div，但如果这就是你想要的，你应该能够相当容易地扩展。根据 CMS 如何放置元素的其他限制，您可能会遇到问题，但总体思路仍然应该适用。
编辑：只是为了确保在答案中捕获评论，对于基于滚动而不是基于鼠标的淡入淡出，这里有一个快速演示：
制作人员：
希望这会有所帮助。
If I understood you correctly, here's a quick demo of what you are looking for:
No images there, just colored divs, but if that's what you want, you should be able to extend rather easily. Depending on other restrictions of how elements are placed by CMS, you might run into problems, but still the general idea should be applicable.
Edit: just to make sure the comments are captured in the answer, for scrolling-based instead of mouse-based fades, here's a quick demo:
Credits:
Hope this helps.