スティッキーヘッダーとWP管理バーを動作させる

WordPressの粘着性の頭と管理バーの重複の問題を解決する WordPressテーマでは、粘着性のヘッド（または固定位置ヘッド）が管理バーと重複しています。どちらも

を使用して、視覚的な競合をもたらします。管理者はZ-Indexの99999を持っているため、通常、被験者の粘着性の頭をカバーします（逆も同様です）。この記事では、CSS（およびSASS）を使用してこの問題を解決する方法について説明します。 position: fixed; top: 0;

（注：一部のトピックはJavaScriptを使用して粘着性要素を見つけます。JavaScriptがインラインプロパティを更新し続ける場合、次の方法は無効です。 top CSSを使用してヘッド位置を調整します 簡単にするためには、

クラスを使用して、ページの上部にピン留めされている要素を表します。トピックに基づいて適切なセレクターを見つける必要があります。

位置値は0であると仮定します。

値がオフセットされている場合、次の測定値を調整する必要があります。

.sticky-header管理バーがフロントエンドで表示されると、WordPressはクラスをページの>要素に添付します。 （これは通常、topの関数によって処理されます。）このクラスにより、粘着性ヘッドの位置を調整できます。 top

管理バーの高さは32pxです。粘着性の頭を下に移動するだけです。しかし、問題は、管理バーの高さが常に32pxではないということです。 .admin-bar 小さな画面用の cssheader.php body_class();幅が783px未満の画面では、管理バーの高さは46pxです。補償するには、コードを変更する必要があります top

モバイルファーストCSSを好む場合は、次のコードを使用してください。

/* 原有CSS... */
.sticky-header {
  position: fixed;
  top: 0;
}
/* 新增CSS... */
.admin-bar .sticky-header {
  top: 32px;
}

SASS

と再利用可能な混合物を作成します このMixinは、指定された要素（非0）の値を許可するオプションのパラメーター

を受け入れます。オフセットが指定されていない場合、Mixinは0であると想定します。手動で指定すると、

を指​​定すると、

.admin-bar .sticky-header {
  top: 32px;
}
@media screen and (max-width: 782px) {
  .admin-bar .sticky-header {
    top: 46px;
  }
}

条件がデフォルトの管理列の高さ値を変更します。

の使用方法：

.admin-bar .sticky-header {
  top: 46px;
}
@media screen and (min-width: 783px) {
  .admin-bar .sticky-header {
    top: 32px;
  }
}

結論

上記のコードスニペットを通じて、粘着性の頭とWordPress管理バーの対立を簡単に解決できます。 SASS Mixinは、コードの再利用性を向上させます。

@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;
    }
  }
}

FAQ（FAQ）$offset top（記事が長すぎて擬似オリジナルの目標と一致しないため、FAQパーツはここで省略されています。PAQパーツは、必要に応じて追加または変更できます。

以上がスティッキーヘッダーとWP管理バーを動作させるの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。