6

我正在开发一个移动网站，一旦网站加载，全屏图像将显示为浮动层。

请看下文………… 在此处输入图像描述

A: 我的手机网站包含很多超出窗口高度的内容

B：页面加载后，全屏图像显示为内容顶部的浮动层。图片超出窗户高度

C：当用户向下滚动时，他可以看到图像的下部，但看不到网站内容。无论用户如何尝试向下滚动，图像的底部都不应与屏幕底部分离

我可以知道如何实现 C 吗？

另外，在情况 B 中，如果用户使用的是大屏幕智能手机，有时图像可能不会超过屏幕高度，这种情况下，图像应该固定在屏幕顶部，不能滚动。

如果以上所有都可以通过不使用jquery来实现会更好。但是，如果是必须的，那还是可以的…………

非常感谢。

4

1 回答 1

1

虽然只能使用 CSS 实现一般效果，但您可能需要 javascript 来打开和关闭效果。

总体思路是在包含图像的图层上使用position: fixedand ，而has . 在这些条件下，您可以滚动覆盖的内容，但不能滚动正文。overflow: scrollbodyoverflow: hidden

虽然这适用于桌面，但在移动设备上情况会有所不同，尽管overflow: hidden在body. 一个快速的解决方法是也适用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;
}

有了这个，您可以使用 javascriptno-scroll在body. 当它在那里时，溢出的内容被隐藏并且overlay可见。当它不存在时，它overlay是隐藏的。

这是一个效果示例（但没有 .no-scroll 类和 javascript，只是为了表明它有效）：

  1. 全屏
  2. 标记/CSS可见

编辑：

在上面的例子中，我给了overlay一个半透明的背景，并给它里面的图像一个max-width100%。如果您希望整个屏幕都充满图像，请将 更改max-width为常规width.

编辑2：

根据要求，这里有一个 jQuery 函数来切换效果。

$(".close").click(function() {
  $("body").toggleClass("no-scroll");
});

只需给出一个<button>或任何类名close，它就会打开和关闭效果。

于 2013-10-13T12:15:38.610 回答