联盟
源码引用了星语的小木屋的《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/1403.html
更新时间：2025年05月23日
1.本站大部分内容均收集于网络!若内容若侵犯到您的权益，请发送邮件至：305582964@qq.com，我们将第一时间处理！2.资源所需价格并非资源售卖价格，是收集、整理、编辑详情以及本站运营的适当补贴，并且本站不提供任何免费技术支持。
3.所有资源仅限于参考和学习，版权归原作者所有，更多请阅读用户协议和免责声明。
哇，这个景深特效做得真好，看了教程后试着在自己的网站上也加上了，效果很赞！😊只是有点小疑问，那个导航栏的距离设置，具体数值如何确定呢？