我正在开发一个移动网站，一旦网站加载，全屏图像会显示为浮动层。
请看下面......
A：我的移动网站包含大量超出窗口高度的内容
B：页面加载后，全屏图像显示为内容顶部的浮动层。图片超出窗口高度
C：当用户向下滚动时，他可以看到图像的下部，但看不到网站内容。无论用户如何向下滚动，图像的底部都不应与屏幕底部分离
我可以知道如何实现 C 吗？？
另外，在情况 B 中，如果用户使用的是大屏幕智能手机，有时图像可能不会超过屏幕高度，在这种情况下，图像应该固定在屏幕顶部且不可滚动。
如果以上所有都可以通过不使用jquery来实现会更好。不过，如果是必须的话，那还是可以的…………
非常感谢。
【问题讨论】：
标签： javascript html css image position
虽然一般效果只能通过 CSS 实现，但您可能需要 javascript 来打开和关闭效果。
一般的想法是在包含图像的层上使用position: fixed 和overflow: scroll，而body 具有overflow: hidden。在这些情况下，您可以滚动叠加层的内容，但不能滚动正文。
虽然这适用于台式机，但在移动设备上情况会有所不同，尽管body 上的overflow: hidden 会呈现所有内容。一个快速的解决方法是将position: fixed 也应用于body。我不知道这是否是预期的行为，但它在 iOS 上的 Safari 和 Chrome 中都可以正常工作。
标记轮廓：
<body class="no-scroll">
<section class="content">
/* content here */
</section>
<aside class="overlay">
<img src="img.jpg">
</aside>
</body>
CSS：
.no-scroll {
overflow: hidden;
position: fixed;
}
.overlay {
overflow-y: scroll;
position: fixed;
top: 0; right: 0; bottom: 0; left: 0;
display: none;
}
.overlay img {
width: 100%;
height: auto;
}
.no-scroll .overlay {
display: block;
}
有了这个，您可以使用 javascript 在body 上切换no-scroll 类。当它在那里时，溢出的内容被隐藏，overlay 是可见的。当它不存在时，overlay 将被隐藏。
这是一个效果示例（不过，没有 .no-scroll 类和 javascript，只是为了表明它有效）：
编辑：
在上面的例子中，我给overlay 一个半透明的背景，并给它里面的图像一个100% 的max-width。如果您希望整个屏幕都充满图像，请将max-width 更改为常规width。
编辑 2：
根据要求，这里有一个 jQuery 函数来切换效果。
$(".close").click(function() {
$("body").toggleClass("no-scroll");
});
只需提供<button> 或任何类名close，它就会打开和关闭效果。
【讨论】：