源码引用了星语的小木屋的《B站首页顶部景深特效[源码]》
教程
首先打开header.php，在<body>后面找个喜欢的位置放置如下代码：
插入上面的代码之后，网站头部会出现景深的部分，但是会被顶部<header></header>内部的导航栏挡的严严实实。所以还需要加一些JS改进改进：
接着在header.php 中加入如下JS代码
这部分检查距离顶部距离是从网上找的，但我忘了出处了。。。这部分代码会让你的导航栏保持在景深区块的下面（景深区块在<style>中设定了高度为155px，所以只要保证：1.导航栏距离网页顶部的距离不小于155px，2.保证导航栏距离顶部大于155px时固定在视窗的上面，即top:0;，3.让导航栏随动）
但在这之后并没有完成。因为你会发现在<header>之后的元素会被移动后的导航栏挡住，有时候文章主内容还会挡住景深层。所以你还需要加入如下代码：
因为懒得再改代码了，就直接用之前的代码，只不过增加了一个class：jingshen2,。这个地方用visibility:hidden;将jingshen2中的图片隐藏，让这个图片作为占位符为我们顶出来140px的高度，这个高度可以去 .jingshen2 .banner的height中修改。CSS的visibility最低支持IE 4.0。所以完全不用怕有的游客浏览器太烂了出现多出一个景深区域的问题。
废案
当初原本想把占位图片的HTML做个小工具放到子比的“所有顶部”中。但我发现，那个所有不包括论坛，好像还不包括作者页面。所以废弃了。相关代码如下：
为什么小工具加入后会多出俩输入框，但并没有什么用呢。因为这个代码是我从我还在开发的主题里取下来的，我懒得修改了。
结束语
这就是所有的步骤了，我觉得不难，挺好用呢，就是记得如果你更新主题，记得备份。移植到其他主题上的时候，记得改改控制导航栏JS代码中的jQuery。
![[纯代码版] 实现网站新注册用户和会员用户展示模块 -子比主题美化-沐颜小栈](https://www.muooy.cn/wp-content/uploads/2024/05/QQ截图20240527190440.png)
![【第二版】HTML 代码打造 BMI 身体质量指数计算器[zibll子比美化教程]-沐颜小栈](https://www.muooy.cn/wp-content/uploads/2025/04/20250420012955075213.webp)
![子比主题侧边栏显示天气预报加一言教程[WordPress子比zibll主题美化]-沐颜小栈](https://www.muooy.cn/wp-content/uploads/2025/04/20250419123448340673.webp)
- 最新
- 最热
只看作者