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

投稿  懿古今 2017-04-27 07:33 阅读 121 次 评论 25 条

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>

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

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

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

参考资料

赞赏作者

如果文章对你有帮助,请赞赏支持作者继续创作!

文章标签: ,   ,  
原文地址:http://yigujin.cn/1180.html
温馨提示:文章内容仅代表作者个人观点,不代表boke112导航赞同其观点和对其真实性负责!
版权声明:本文为投稿文章,感谢 懿古今 的投稿,版权归原作者所有,欢迎分享本文,转载请保留出处!
WordPress免费响应式主题:Nana

发表评论


表情

  1. 淘宝优惠券
    淘宝优惠券 【农民】 @回复

    写的很好

  2. 春熙路
    春熙路 【省长】 @回复

    ye前来玉竹生日快乐

  3. 星空游戏
    星空游戏 【镇长】 @回复

    要生日了吗?提前祝生日快乐

  4. 多努力网
    多努力网 【农民】 @回复

    我来了,过来看看

  5. Koolight
    Koolight 【省长】 @回复

    提前祝博主节日快乐!

  6. GIF234邪恶吧
    GIF234邪恶吧 【省长】 @回复

    嘿嘿 学习了

  7. YangOne
    YangOne 【镇长】 @回复

    虽然侧边栏对本站无用,但是还是顶一下,祝一路顺风。

  8. 我要网赚
    我要网赚 【市长】 @回复

    活跃是必须的,我每天都来评论

  9. 呆毛电脑配置网
    呆毛电脑配置网 【县长】 @回复

    一帆风顺吧。

  10. 岷仁安防网
    岷仁安防网 【镇长】 @回复

    很久没有来了、

  11. 战略
    战略 【村长】 @回复

    博主回老家了,一路顺风

  12. 春熙路
    春熙路 【省长】 @回复

    这个厉害了我的哥,发现好多博友都用nana主题

  13. 多努力网
    多努力网 【农民】 @回复

    我的是zblog呀

  14. 星空游戏
    星空游戏 【镇长】 @回复

    我是感觉还不错

  15. 王商博客
    王商博客 【县长】 @回复

    这个确实挺不错的,刚好换到wordpress,这个可以折腾一下。

  16. 爱时尚
    爱时尚 【省长】 @回复

    wordpress感觉没zblog好用

  17. 靠谱学生兼职网
    靠谱学生兼职网 【市长】 @回复

    教程确实很实用。

  18. 演绎法
    演绎法 【县长】 @回复

    大多都是教程啊

  19. 金榜台博客
    金榜台博客 【市长】 @回复

    bu 不错的教程

  20. 明月学习笔记Blog
    明月学习笔记Blog 【村长】 @回复

    淡定的坐地板! [黑线]

  21. 明月登楼
    明月登楼 【总理】 @回复

    做个板凳也不错!

  22. 吃货小栈
    吃货小栈 【村长】 @回复

    嘿嘿,又做个沙发~!