1

我正在构建投资组合网站的联系表。我想在页面底部有一个信封，当用户向下滚动时，联系表单会从该信封中滑出。我通过在彼此之上创建三层（绝对定位的 DIV）来做到这一点，从下到上：

  • #envelopeBack（仅包含背景图片）
  • #envelopeContents（内含实际联系方式）
  • #envelopeFront（仅包含背景图片）

前景图像是一个 alpha 透明的 PNG 文件。然后我编写了一些 jQuery 来在正确的时间设置和#envelopeBack并扩展 的高度，使它看起来好像从信封中滑出一样。#envelopeFrontposition: fixed#envelopeContents

效果很好，但正如预期的那样，该#envelopeFront层阻止了与底层联系表单的所有交互#envelopeContents（即您不能单击任何按钮、选择任何字段等）。我通过使用来反驳这一点pointer-events: none，但这仅适用于某些浏览器（例如，在 Chrome 中有效，但在 IE 中无效）。

有没有办法让它在所有“主要浏览器”上工作？是否有更好的方法来实现这种滑动包络效果？我已将一些相关代码复制粘贴到jsFiddle中。我还对 应用了红色background-color以#envelopeFront显示它隐藏了哪些部分（CSS 第 34 行）。pointer-events: none位于 CSS 第 38 行。至于“主要浏览器” ：

  • Chrome（最新版本还可以）
  • 火狐（最新版本还可以）
  • Safari（版本 5+）
  • Internet Explorer（8+，虽然我也愿意接受 9+）

提前致谢！

4

0 回答 0