介绍一种让 Sakurairo 随侧边栏的出现，使其中的布局自动变色的方案

引言

本教程包括布局：🍔移动端的汉堡菜单 iconflat、搜索按钮 i、🔗顶栏中的标签元素 a 的黑白色过渡，具体效果可前往我的博客 https://polarissmusic.cn 查看。

此处不介绍顶栏 Logo 自动变色方案的具体介绍，因为我的博客直接修改了顶栏的 PHP 文件以使用 svg 格式来作为我的顶栏 Logo。

开始

对于🔍搜索按钮 `i`、🔗顶栏中的标签元素 `a`

这其实超级简单，按下 F12，在滚动页面时会发现有一个 CSS 样式 yya 被添加到顶栏中：

<header class="site-header no-select" role="banner">...</header>
 
<header class="site-header no-select yya" role="banner">...</header>

所以我们只写一个：当 yya 样式出现时，更改搜索按钮 i及顶栏中的标签元素 a 的颜色就可以：

.site-top .lower a{
    transition: all 0.3s cubic-bezier(0.82, 0, 0.58, 1);
    color:#FFFFFF;
}
 
.site-header i{
	transition: all 0.3s cubic-bezier(0.82, 0, 0.58, 1);
    color:#FFFFFF;
}
 
.yya .lower a{
	transition: all 0.3s cubic-bezier(0.82, 0, 0.58, 1);
    color:#000000;
}
 
.yya i{
	transition: all 0.3s cubic-bezier(0.82, 0, 0.58, 1);
    color:#000000;
}

将以上自定义的 CSS 文件添加到你的 WordPress 后台中的：外观 --> 自定义 --> 额外 CSS 中，随后点击发布就可以了。

我们通过元素定位，定位到了 i 和 a 的位置，当 yya 样式出现时，对其更改一个新的颜色属性。

为了过渡更加流畅，我添加了 transition: all 0.3s cubic-bezier(0.82, 0, 0.58, 1); 贝塞尔曲线属性，如果你不喜欢可自行删除。

对于🍔移动端的汉堡菜单 `iconflat`

这就不像搜索按钮和标签元素那样简单了，因为对于移动端的汉堡菜单中：

<div class="openNav no-select">
	<div class="iconflat no-select" style="padding: 30px;">
		<div class="icon"></div>
	</div>
</div>

它并没有随着页面滚动而添加新的 CSS 样式，而且也没有被 yya 元素所包裹起来......

解决方法

既然移动端的汉堡菜单 iconflat 没有随着页面的滚动而增加新的 CSS 样式，我们就来自己创造一个！

yya 样式肯定是被一个 JavaScript 所控制，所以只要我们模仿那个 JavaScript 函数来写一个随着页面滚动，为汉堡菜单 iconflat 添加一个新的 CSS 样式就可以了！

于是找啊找......这个 JavaScript 位于 Sakurairo-2.6.3.1/js/app.js！

我们所需要的那部分长这样：

const e = document.querySelector(".site-header")
    , t = document.querySelector(".skin-menu")
    , n = document.querySelector("#changskin")
    , o = document.querySelector("#moblieGoTop")
    , r = t=>{
      t > 0 ? e.classList.add("yya") : e.classList.remove("yya");
      const r = t > 20 ? "scale(1)" : "scale(0)";
      o.style.transform = r,
      n.style.transform = r
  }
  ;

对它魔改一下......？

为了达到汉堡菜单自动变色的效果，我们首先要定义一个默认颜色，就选择白色吧；且当出现一个新的样式时，汉堡菜单的颜色要切换到黑色。

为此我们定义一个空的 CSS 样式：make-it-black，并实现上述效果：

.no-select .icon{
	transition: all 0.3s cubic-bezier(0.82, 0, 0.58, 1);
	background-color:#FFFFFF;
}
 
.no-select .icon:before{
	transition: all 0.3s cubic-bezier(0.82, 0, 0.58, 1);
	background-color:#FFFFFF;
}
 
.no-select .icon:after{
	transition: all 0.3s cubic-bezier(0.82, 0, 0.58, 1);
	background-color:#FFFFFF;
}
 
.make-it-black .no-select .icon{
	transition: all 0.3s cubic-bezier(0.82, 0, 0.58, 1);
	background-color:#000000;
}
 
.make-it-black .no-select .icon:before{
	transition: all 0.3s cubic-bezier(0.82, 0, 0.58, 1);
	background-color:#000000;
}
 
.make-it-black .no-select .icon:after{
	transition: all 0.3s cubic-bezier(0.82, 0, 0.58, 1);
	background-color:#000000;
}

同理，将以上自定义的 CSS 文件添加到你的 WordPress 后台中的：外观 --> 自定义 --> 额外 CSS 中，随后点击发布就可以了。

接下来是 JavaScript 的部分：

const e = document.querySelector(".site-header")
    , t = document.querySelector(".skin-menu")
    , n = document.querySelector("#changskin")
    , o = document.querySelector("#moblieGoTop")
    , h = document.querySelector(".openNav")
    , r = t=>{
      t > 0 ? e.classList.add("yya") : e.classList.remove("yya");
      t > 0 ? h.classList.add("make-it-black") : h.classList.r  ("make-it-black");
      const r = t > 20 ? "scale(1)" : "scale(0)";
      o.style.transform = r,
      n.style.transform = r
  }
  ;

前往 Sakurairo-2.6.3.1/js/app.js，使用自己喜欢的编辑器搜索 yya，定位到这部分直接对原内容（在 ### 解决方法中）覆盖即可。

我们模仿原 JavaScript 文件添加了：

随着页面滚动，为汉堡菜单所在的元素添加一个 make-it-black 的空样式。

配合先前定义的 CSS 样式，就可以做到汉堡菜单自动切换颜色的效果。

结语

感谢你阅读这篇文章。

链接树：https://links.polarissmusic.cn

我的个人博客：https://polarissmusic.cn

在 X（Twitter）上关注我：https://twitter.com/PolarisSdesu