华纳云香港服务器

Nana主题实现侧边栏智能跟随滚动的教程

WordPress主题推荐

Nana 主题原先的侧边栏跟随都是需要在后台小工具中添加相应小工具到首页或文章页的侧边栏跟随滚动模块,而且往下滚动的时候,有些页面还会出现侧边栏下方空荡荡的,只有一个小工具跟随滚动,所以今天跟大家分享一下 Nana 主题如何实现侧边栏智能跟随滚动。PS:智能跟随滚动的效果请看本站效果。

Nana 主题实现侧边栏智能跟随滚动步骤

1、点击下载 stickySidebar.zip 压缩包,将解压后得到的 stickySidebar.js 文件上传到 Nana\js 文件夹。

2、在 header.php 文件中添加 stickySidebar.js 文件,比如登录 WordPress 后台 – 外观 – 编辑 – 点击右侧的 header.php 文件,然后在适当位置添加以下代码:

  1. <script type=“text/javascript” src=“<?php bloginfo(‘template_directory’); ?>/js/stickySidebar.js”></script>

Nana主题实现侧边栏智能跟随滚动的教程-第1张-boke112百科(boke112.com)

3、把站点原先设置的跟随小工具添加到首页或文章页中,比如登录 WordPress 后台 – 外观 – 小工具 – 把『正文、页面跟随滚动』中的小工具添加到『正文侧边栏』中;把『首页、分类、归档跟随滚动』中的小工具添加到『首页侧边栏』中。

Nana主题实现侧边栏智能跟随滚动的教程-第2张-boke112百科(boke112.com)

至此,我们就已经成功让 Nana 主题实现侧边栏智能跟随滚动功能,具体效果请看懿古今站点首页和文章页侧边栏效果。因为不是每个人都喜欢这种方式的滚动,而且实现起来也非常简单,所以就没有集成到 Nana 主题中,如果有需要这个功能的,请自行根据教程折腾即可。

参考资料

本文地址:https://boke112.com/post/3917.html

赞 (0) 打赏
版权声明:本文为投稿文章,感谢 懿古今 的投稿,版权归原作者所有!发布此文是出于传递更多信息之目的,若有来源标注错误或侵犯了您的合法权益,请联系我们,确认后马上更正或删除,谢谢!
wu