ポートフォリオ Web サイトの連絡フォームを構築しています。ユーザーが下にスクロールすると、そこから連絡フォームがスライドするページの下部に封筒が必要でした。これを行うには、3 つのレイヤー (絶対配置 DIV) を下から上に重ねて作成します。
前景画像はアルファ透過の PNG ファイルです。#envelopeBack次に、適切なタイミングでとの両方#envelopeFrontを設定する jQuery を作成position: fixedし、 の高さを拡張して#envelopeContents、エンベロープから滑り落ちているように見せます。
効果はうまく機能していますが、予想どおり、#envelopeFrontレイヤーは下にある連絡先フォームとのすべてのやり取りをブロックし#envelopeContentsます (つまり、ボタンをクリックしたり、フィールドを選択したりすることはできません)。を使用してこれに対抗しましたが、一部のブラウザーpointer-events: noneでのみ機能します(たとえば、Chrome では機能しますが、IE では機能しません)。
これをすべての「主要なブラウザ」で機能させる方法はありますか? このスライディング エンベロープ効果を実装するためのより良い方法はありますか? 関連するコードの一部をコピーしてjsFiddleに貼り付けました。また、非表示になっている部分を示すために に赤background-colorを適用しました#envelopeFront(CSS 行 34)。これpointer-events: noneは CSS の 38 行目にあります。「主要なブラウザ」については、次のとおりです。
- Chrome（最新版でOK）
- Firefox（最新版でOK）
- Safari (バージョン 5 以降)
- Internet Explorer (8 以上、ただし 9 以上でも構わないと思います)
前もって感謝します！