ナマズ - パート1

この記事では、スクロールするときでもウェブページの下部に表示されたままの永続的な「ナマズ」広告バナーを作成する方法について説明します。 この手法では、CSSとJavaScriptの組み合わせを使用し、インターネットエクスプローラーの特別な取り扱いを行います。

重要な概念：

永続的なボトムバナー：
• コア機能は、CSSを使用してページの下部に配置されたDiv要素です（）。 position: fixedクロスブラウザーの互換性：
• を使用した最初のCSSのみのアプローチは、インターネットエクスプローラーの古いバージョンでは機能しません。 ソリューションには、条件付きコメントとDOM操作が含まれて、IEのみのラッパーDiv（）を追加します。 このラッパーは、バナーにを使用し、position: fixedを使用してラッパー内のスクロールを管理します。 div#zipposition: absoluteIE固有の取り扱い：overflow: autoカスタムjavaScript関数（
）は、ラッパーdivをIE DOMに動的に注入し、他のブラウザに影響を与えることなく互換性を確保します。
• 条件付きコメント：これらのコメントは、ブラウザー固有のCSSおよびJavaScriptの包含を可能にします。 これにより、IEのみが修正に必要な追加のマークアップを受信することが保証されます。 wrapFish
効率的なマークアップ：
• 追加のdivと関連するスタイルは、インターネットエクスプローラーにのみ追加されており、他のブラウザの不必要な肥大化を回避します。
• コードスニペット：

次のコードスニペットは、使用されたCSSとJavaScriptを示しています。 これは、デモンストレーションのための単純化されたバージョンであることに注意してください

：

： catfish.css

#catfish {
  position: fixed;
  bottom: 0;
  background: transparent url(images/catfish-tile.gif) repeat-x left bottom;
  padding: 0;
  height: 79px; /* includes transparent part */
  cursor: pointer;
  margin: 0;
  width: 100%;
}

html {
  padding: 0 0 58px 0; /* 58px = height of the opaque part of the Catfish */
}

： IEhack.css

div#zip {
  width: 100%;
  padding: 0;
  margin: 0;
  height: 100%;
  overflow: auto;
  position: relative;
}

条件付きコメント（例）：

catfish.js このアプローチにより、不必要なコードを最小限に抑えながら、ブラウザ全体で一貫したユーザーエクスペリエンスが保証されます。 条件付きバナーの選択や配置制御などのさらなる改良により、機能が強化されます。

以上がナマズ - パート1の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。