Nana主题如何实现侧边栏智能跟随滚动的好代码教程

春季是一个富有生命力季节,也是一个美丽、神奇,充满希望季节。都说春季是花海洋。粉色淡雅,白色端庄,红色热烈,紫色深情,泼泼洒洒,浓浓烈烈。一朵朵花,把春季朝气蓬勃都开出来了。

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

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

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

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

  1. <scripttype="text/javascript"src="<?phpbloginfo('template_directory');?>/js/stickySidebar.js"></script>

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

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

参考资料

  • WordPress 简单代码实现智能侧边栏跟随固定浮动的效果

本文Nana主题如何实现侧边栏智能跟随滚动的好代码教程到此结束。战士的意志要象礁石一样坚定,战士的性格要像和风一样温柔。小编再次感谢大家对我们的支持!

标签: Nana