jQuery滑动图片标题遮罩层显示

CSS 样式需定义遮罩层的位置、尺寸和背景色。使用 rgba(0, 0, 0, 0.5) 实现半透明黑色背景，并通过 display: none 初始隐藏。

使用 jQuery 的 $(window).scroll() 监听滚动事件，通过 offset().top 判断图片是否进入视口区域。根据判断结果调用 fadeIn() 或 fadeOut() 控制遮罩层显隐。

为提高初次加载的准确性，可在 $(document).ready() 内触发一次位置检测，确保首屏图片遮罩层正确显示。此外，绑定 resize 事件可提升响应性。

这种基于滚动的动态遮罩展示方式，在产品展示或项目类页面中尤为常见，与 鼠标悬浮显示遮罩 及 动画显隐图片标题 等效果有异曲同工之妙。相关技术可参考 jQuery 制作鼠标悬浮图片显示遮罩标题效果 与 jQuery 动画显示隐藏的图片标题。

结合这些方法，可以灵活控制遮罩层的触发方式，为不同页面场景一致的视觉交互体验。