8wDlpd.png
8wDFp9.png
8wDEOx.png
8wDMfH.png
8wDKte.png

 
[教程]仅需要两行代码即可固定顶部导航栏
头像 天无神话 6月前

        大家都知道,本站使用的是xiuno系统。我也很爱折腾,近日在给网站改板,感觉顶部导航导航栏很不顺眼。作为一个导航栏,往上滑动帖子列表,导航栏也跟着滑走了。一点儿都不人性化。

       我修改的内容是知乎模板1.7,需要的朋友请自己下载,系统模板也是相同的修改方法,找到原版系统模块修改即可。还有一件事,修改其他模板的话,也是下方类似路径,仅仅是看这个模板名叫什么,比如知乎模板就是zaesky_theme_zhihulan这个文件夹。

模板路径:

plugin/zaesky_theme_zhihulan/overwrite/view/htm/header_nav.inc.htm

原版系统路径:

/view/htm/header_nav.inc.htm

大致模样:

代码

<style>
	#header{
    z-index: 9999;
    position: fixed;
    }
</style>

<style>标签包括css内容

header指向header导航标签

z-index: 9999设置显示到最大层面

position: fixed设置位置固定

<header>标签必须含有id="header",否则不生效。

建议:建议在header结束标签后添加一个高度,可以是div标签带上id,写css定义高度,还有一个最简单的方法就是填写<br>&nbsp;<br>

打开目标htm后,复制css代码内容粘贴到顶部保存使解析生效。注意:修改后,需要清理tmp内相关文件,也可以全部清理,或是打开后台导航栏其他类,确定清理缓存和临时目录。

分割线 聚力云互联首月3元
最新回复 (3)
返回
免责申明:本站极少部分资源来自于网络,如有侵权,请发邮件至(twsh0305@qq.com),告诉我们,我们会立即撤下相关内容!