获得粘头标题和WP管理栏的行为

解决WordPress粘性头部与管理栏重叠问题

WordPress主题中，粘性头部（或固定位置头部）与管理栏重叠是一个常见问题。两者都使用position: fixed; top: 0;，导致视觉冲突。由于管理栏的z-index为99999，它通常会覆盖主题的粘性头部（反之亦然）。本文将介绍如何使用CSS（和Sass）解决此问题。

(注意：某些主题使用JavaScript来定位粘性元素。如果JavaScript持续更新内联top属性，以下方法无效。)

使用CSS调整头部位置

为简化起见，我们使用.sticky-header类来表示固定在页面顶部的元素。您应根据您的主题找到正确的选择器。我们假设其top位置值为0。如果top值已偏移，则需要调整以下测量值。

当管理栏在前端可见时，WordPress会将.admin-bar类附加到页面的元素。（这通常由header.php中的body_class();函数处理。）此类允许我们调整粘性头部的top位置。

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

管理栏高度为32px，我们只需将粘性头部向下移动即可。但问题是，管理栏高度并非总是32px。

针对小屏幕的CSS

在宽度小于783px的屏幕上，管理栏高度为46px。我们需要修改代码以进行补偿：

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

如果您更喜欢移动优先CSS，请使用以下代码：

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

使用Sass创建可复用的mixin

如果使用Sass构建主题，我们可以将其封装到一个可复用的mixin中：

<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>

此mixin接受一个可选参数$offset，允许指定元素的top值（非0）。如果没有指定偏移量，mixin将假设为0。如果手动指定$offset，@if条件将修改默认的管理栏高度值。

使用方法：

<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>

结论

通过以上代码片段，可以轻松解决粘性头部与WordPress管理栏的冲突问题。 Sass mixin提高了代码的可重用性。

常见问题解答 (FAQs)

（此处省略了FAQ部分，因为篇幅过长，且与伪原创目标不符。FAQ部分内容可以根据需要自行添加或修改。）

以上是获得粘头标题和WP管理栏的行为的详细内容。更多信息请关注PHP中文网其他相关文章！