粘性头布局和流式布局_使粘性标题和WordPress管理栏生效

最新推荐文章于 2023-03-27 08:39:16 发布

culi4814

最新推荐文章于 2023-03-27 08:39:16 发布

阅读量265

点赞数

文章标签： java python css 面试 vue ViewUI

原文链接：https://www.sitepoint.com/getting-sticky-headers-wordpress-admin-bar-behave/

版权

粘性头布局和流式布局

Putting a site’s logo and main navigation into a sticky header (or a fixed-position header) is a definite trend now. It’s become popular for WordPress themes as well: check out posts like all of these.

现在，将站点的徽标和主导航放置在粘性标头(或固定位置的标头)中是一种必然趋势。它已经成为流行的WordPress主题，以及：检查出的职位像所有的这些。

In a WordPress site, however, sticky headers run into a problem when the admin bar is visible. Both the admin bar and most sticky headers rely on position: fixed; top: 0;, and are positioned according to the viewport. They end up overlapping. Since the admin bar has a z-index of 99999, it usually covers a good bit of the theme’s sticky header (or if the header wins the z-index war, then it covers the admin bar). Let’s look at how we can use CSS (and Sass) to fix this problem.

但是，在WordPress网站中，管理栏可见时，粘贴标头会出现问题。管理栏和大多数粘性标题都依赖于position: fixed; top: 0; position: fixed; top: 0; ，并根据视口定位。他们最终重叠。由于管理栏的z-index为99999 ，因此通常会覆盖主题的大量粘性标头(或者，如果标头赢得z-index war，则它会覆盖管理栏)。让我们看看如何使用CSS(和Sass)解决此问题。

[Quick note: some themes use JavaScript to position sticky elements as the page scrolls. If JavaScript is constantly updating an inline top property, the technique outlined below won’t fix this problem.]

[快速说明：某些主题使用JavaScript在页面滚动时定位粘性元素。如果JavaScript不断更新内联top属性，则下面概述的技术将无法解决此问题。]

CSS移动标题 (CSS to Move the Header)

For the sake of simplicity, we’ll use the class .sticky-header to refer to the element that’s fixed to the top of the page. You should find the correct selector for your theme and use that. We’ll also assume that its top position value is 0. If it’s top is offset to anything else, you’ll need to do the math and tweak the measurements below.

为了简单起见，我们将使用.sticky-header类来引用固定在页面顶部的元素。您应该为主题找到正确的选择器并使用它。我们还假设，它的top位置值是0。如果它的top偏移到别的，你需要做数学和调整下面的测量。

When the admin bar is visible on the front-end, WordPress attaches the class .admin-bar to the <body> of the page. (This is handled by the function body_class(); in header.php most of the time.) That class will let us adjust the top position of our sticky header.

当前端显示管理栏时，WordPress .admin-bar类附加到页面的<body>上。 (大多数情况下，这是由header.php body_class();函数处理的。)该类使我们可以调整粘性标头的top位置。

/* This is the existing CSS... */
.sticky-header {
  position: fixed;
  top: 0;
}
/* Here's the new CSS to add... */
.admin-bar .sticky-header {
  top: 32px;
}

That’s pretty manageable, right? The admin bar is 32px tall, so we just move the sticky header down and both are visible. The only problem is, it’s not always quite that simple: the admin bar isn’t always 32px tall. In which case, you’ll need to use CSS.

那很容易处理，对不对？管理栏高度为32px，因此我们只需将粘性标头向下移动即可看到。唯一的问题是，它并不总是那么简单：管理栏并非总是32px高。在这种情况下，您将需要使用CSS。

小屏幕CSS (CSS for Small Screens)

On screens narrower than 783px, the admin bar is 46px tall. We’ll need to modify our code to compensate for that:

在小于783px的屏幕上，管理栏的高度为46px。我们需要修改代码以弥补这一点：

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

If you prefer mobile-first CSS (as I do), use this code:

如果您喜欢移动优先CSS(就像我一样)，请使用以下代码：

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

Now you’ll have the sticky header positioned correctly, no matter how wide the screen is! We’re not quite through, though. If you use Sass to build your theme, we can roll this up into a reusable mixin.

现在，无论屏幕有多宽，您都可以正确放置粘性页眉！但是，我们还没有完全通过。如果您使用Sass构建主题，我们可以将其汇总为可重用的mixin。

If you’re a theme developer or building a child theme, you already know where to put this CSS in your existing stylesheets. If, on the other hand, you’re working with an existing theme that doesn’t handle its sticky header very well and you simply need to insert this code, you can use a plugin that allows you to insert CSS like WP Add Custom CSS or Simple Custom CSS.

如果您是主题开发人员或正在构建子主题，则您已经知道将此CSS放在现有样式表中的位置。另一方面，如果您正在使用无法很好地处理其粘性标头的现有主题，而只需要插入此代码，则可以使用允许您插入CSS的插件，例如WP Add Custom CSS或简单自定义CSS 。

Sass移动标题 (Sass to Move the Header)

I’m going to call this mixin admin-sticky-fix(). We’ll take a look at the entire block of code, then look at how each part works.

我将其称为mixin admin-sticky-fix() 。我们将研究整个代码块，然后研究每个部分的工作方式。

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

The mixin takes an optional parameter: $offset. This allows you specify that the element has a top value other than 0. If you don’t specify any offset, the mixin will assume 0 and work with that. If you manually specify an $offset, the @if condition will modify the default admin bar height values to match. Note: Just use an integer: the px unit isn’t needed, but it won’t break things if you do include it.

mixin有一个可选参数： $offset 。这允许您指定该元素的top值不是0 。如果您未指定任何偏移量，则混入将假定为0并使用该值。如果您手动指定$offset ，则@if条件将修改默认的管理栏高度值以匹配。 注意：只需使用整数：不需要px单位，但是如果包含px单位也不会破坏东西。

Our mixin uses Sass nesting to simplify things: the & represents whatever selector this mixin is called inside of. So if you @include it in .sticky-header, you’ll get the output selector .admin-bar .sticky-header. You’ll notice the media query is nested inside the selector as well. Sass automatically moves the @media [etc] back to root and copies the current selector into it. This nesting trick just lets us write a shorter mixin.

我们的mixin使用Sass嵌套来简化操作： &表示此mixin在其中调用的任何选择器。因此，如果在@include .sticky-header @include ， .sticky-header获得输出选择器.admin-bar .sticky-header 。您会注意到媒体查询也嵌套在选择器中。 Sass自动将@media [etc]移回根目录，并将当前选择器复制到其中。这个嵌套技巧只允许我们编写一个较短的mixin。

Let’s see how this mixin works now:

让我们看看这个mixin现在如何工作：

/* Sass we write */
.sticky-header {
  position: fixed;
  top: 0;
  
  @include admin-sticky-fix;
}

/* CSS Output */
.sticky-header {
  position: fixed;
  top: 0;
}
.admin-bar .sticky-header {
  top: 46px;
}
@media screen and (min-width: 783px) {
  .admin-bar .sticky-header {
    top: 32px;
  }
}

If you need to match an offset value, use the mixin like this:

如果需要匹配偏移值，请使用mixin，如下所示：

/*  Sass we write */
.sticky-header-offset {
  position: fixed;
  top: 20px;
  
  @include admin-sticky-fix(20);
}

/* CSS Output */
.sticky-header-offset {
  position: fixed;
  top: 20px;
}
.admin-bar .sticky-header-offset {
  top: 66px;
}
@media screen and (min-width: 783px) {
  .admin-bar .sticky-header-offset {
    top: 52px;
  }
}

Having a reusable mixin allows us to quickly tweak any fixed-position item to compensate for WordPress’ admin bar. My mobile menus are often fixed position and this lets me easily adjust their top value as well.

有了可重复使用的mixin，我们可以快速调整任何固定位置的项目，以补偿WordPress的管理栏。我的移动菜单通常位于固定位置，这也使我可以轻松调整其top值。

结论 (Conclusion)

By default, sticky headers will clash with the WordPress admin bar, but with these code snippets, the fix is quite manageable. This Sassmeister gist contains the mixin and a few examples of how it works. Where have you seen good implementations of the sticky header trend and how do you style itgrate in your WordPress themes?

默认情况下，粘性标头将与WordPress管理栏冲突，但是使用这些代码段，此修复程序非常易于管理。 Sassmeister的要点包含mixin及其工作方式的一些示例。您在哪里看到了粘性标头趋势的良好实现，以及如何在WordPress主题中设置样式？

翻译自: https://www.sitepoint.com/getting-sticky-headers-wordpress-admin-bar-behave/

粘性头布局和流式布局

culi4814

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
粘性头布局和流式布局_使粘性标题和WordPress管理栏生效

粘性头布局和流式布局Putting a site’s logo and main navigation into a sticky header (or a fixed-position header) is a definite trend now. It’s become popular for WordPress themes as well: check out posts like al...
复制链接

扫一扫