Der Wels - Teil 1

In diesem Artikel wird erläutert, wie ein anhaltendes "Wels" -An -Banner erstellt wird, das am Ende einer Webseite auch beim Scrollen sichtbar bleibt. Die Technik verwendet eine Kombination aus CSS und JavaScript mit speziellem Handling für Internet Explorer.

Schlüsselkonzepte:

• Persistentes unteres Banner: Die Kernfunktionalität ist ein Div -Element, das am unteren Rand der Seite mit CSS (position: fixed) positioniert ist (
).
• Cross-Browser-Kompatibilität: position: fixed Der anfängliche CSS-Ansatz, der div#zip verwendet, funktioniert in älteren Versionen von Internet Explorer nicht. Die Lösung beinhaltet bedingte Kommentare und DOM -Manipulation, um nur einen Wrapper Div (position: absolute) für den IE hinzuzufügen. Dieser Wrapper verwendet overflow: auto für das Banner und
, um das Scrollen im Wrapper zu verwalten.
• IE-spezifische Handhabung: wrapFish Eine benutzerdefinierte JavaScript-Funktion (
) injiziert die Wrapper Div dynamisch in die IE DOM, um die Kompatibilität zu gewährleisten, ohne andere Browser zu beeinflussen.
• Bedingte Kommentare:
Diese Kommentare ermöglichen Browser-spezifische CSS und JavaScript-Einbeziehung. Dies stellt sicher, dass nur der IE das zusätzliche Aufschlag für die Fix erhält.
• Effizientes Markup:
Die zusätzlichen DIV und die zugehörigen Stile werden nur für Internet Explorer hinzugefügt, wodurch unnötiges Aufblähen für andere Browser vermieden wird.

Code -Snippets:

Die folgenden Code -Snippets veranschaulichen die verwendeten CSS und JavaScript. Beachten Sie, dass dies eine vereinfachte Version für die Demonstration ist.

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 :

function wrapFish() {
  // ... (JavaScript code to wrap the content in div#zip for IE) ...
}

Bedingte Kommentare (Beispiel):

<!--[if lte IE 6]>
  <link rel="stylesheet" type="text/css" href="IEhack.css" />
  <🎜>
  <🎜>
<![endif]-->

Dieser Ansatz sorgt für eine konsistente Benutzererfahrung über die Browser hinweg und minimiert unnötige Code. Weitere Verfeinerungen, wie z.

Das obige ist der detaillierte Inhalt vonDer Wels - Teil 1. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!