Klebrige Header und die WP Admin -Bar zu bekommen, um sich zu verhalten

Lösen Sie das Problem des überlappenden WordPress -Sticky Head- und Management -Balkens

position: fixed; top: 0; In WordPress -Themen überlappt der klebrige Kopf (oder der feste Positionskopf) die Administratorleiste. Beide verwenden

, was zu visuellen Konflikten führt. Da die Administratorleiste Z-Index von 99999 hat, deckt er normalerweise den klebrigen Kopf des Subjekts ab (und umgekehrt). In diesem Artikel wird erklärt, wie dieses Problem mit CSS (und SASS) gelöst werden kann.

top (Hinweis: Einige Themen verwenden JavaScript, um klebrige Elemente zu lokalisieren. Wenn JavaScript die Inline -Eigenschaften weiter aktualisiert, ist die folgende Methode ungültig.)

Verwenden Sie CSS, um die Kopfposition

anzupassen Der Einfachheit halber verwenden wir die

-Klasse, um Elemente darzustellen, die oben auf der Seite festgehalten werden. Sie sollten den richtigen Selektor basierend auf Ihrem Thema finden. Wir gehen davon aus, dass sein .sticky-header Positionswert 0 beträgt. Wenn der top -Werte ausgeglichen wurde, müssen die folgenden Messungen angepasst werden. top

Wenn die Administratorleiste am vorderen Ende sichtbar ist, fügt WordPress die

-Kläufe an das .admin-bar -Element der Seite hinzu. (Dies wird normalerweise von der -Funktion in header.php behandelt.) Diese Klasse ermöglicht es uns, die body_class(); -Position des klebrigen Kopfes anzupassen. top

<code class="language-css">/* 原有CSS... */
.sticky-header {
  position: fixed;
  top: 0;
}
/* 新增CSS... */
.admin-bar .sticky-header {
  top: 32px;
}</code>

Die Höhe der Verwaltungsleiste beträgt 32px, wir müssen nur den klebrigen Kopf nach unten bewegen. Das Problem ist jedoch, dass die Administratorhöhe nicht immer 32px beträgt.

CSS für kleine Bildschirme

Auf Bildschirmen mit Breiten von weniger als 783px beträgt die Managementbalkenhöhe 46px. Wir müssen den Code ändern, um zu kompensieren:

<code class="language-css">.admin-bar .sticky-header {
  top: 32px;
}
@media screen and (max-width: 782px) {
  .admin-bar .sticky-header {
    top: 46px;
  }
}</code>

Wenn Sie Mobile-First CSS bevorzugen, verwenden Sie den folgenden Code:

<code class="language-css">.admin-bar .sticky-header {
  top: 46px;
}
@media screen and (min-width: 783px) {
  .admin-bar .sticky-header {
    top: 32px;
  }
}</code>

Erstellen Sie wiederverwendbares Mixin mit Sass

Wenn Sie ein Thema mit SASS erstellen, können wir es in ein wiederverwendbares Mixin einkapseln:

<code class="language-scss">@mixin admin-sticky-fix( $offset: 0 ) {
  $narrow-offset: 46px;
  $wide-offset: 32px;
  @if $offset != 0 and type-of($offset) == 'number' {
    $narrow-offset: $narrow-offset + $offset;
    $wide-offset: $wide-offset + $offset;
  }
  .admin-bar & {
    top: $narrow-offset;
    @media screen and (min-width: 783px) {
      top: $wide-offset;
    }
  }
}</code>

Dieses Mixin akzeptiert einen optionalen Parameter

, der den Wert $offset des angegebenen Elements (Nicht-0) ermöglicht. Wenn kein Versatz angegeben ist, wird Mixin angenommen, 0 zu sein. Wenn Sie top manuell angeben, ändert der Zustand $offset den Wert des Standardverwaltungsspaltenhöhenhöhe. @if

wie man verwendet:

<code class="language-scss">.sticky-header {
  position: fixed;
  top: 0;
  @include admin-sticky-fix;
}

.sticky-header-offset {
  position: fixed;
  top: 20px;
  @include admin-sticky-fix(20);
}</code>

Schlussfolgerung

Durch das obige Code -Snippet kann der Konflikt zwischen dem klebrigen Kopf und der WordPress -Verwaltungsleiste leicht gelöst werden. Sass Mixin verbessert die Wiederverwendbarkeit des Codes.

FAQs (FAQs)

(Der FAQ-Teil wird hier weggelassen, da der Artikel zu lang ist und nicht mit dem pseudooriginalen Ziel übereinstimmt. Der FAQ-Teil kann nach Bedarf hinzugefügt oder geändert werden.)

Das obige ist der detaillierte Inhalt vonKlebrige Header und die WP Admin -Bar zu bekommen, um sich zu verhalten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!