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

2017年04月11日 08:30:29  阅读 504 次 评论 23 条

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主题实现侧边栏智能跟随滚动的教程 技术文档 第2张

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

参考资料

历史上的今天:

文章标签: ,   ,   ,  
本文地址:https://www.yigujin.cn/1180.html
版权声明:本文为原创文章,版权归 懿古今 所有,欢迎分享本文,转载请保留出处!

相关文章 分类热门分类热评随机文章

发表评论

中国赞表情摊手表情吃瓜表情笑哭表情偷笑表情衰表情汗表情思考表情费解表情抓狂表情晕表情流泪表情疑问表情嘻嘻表情吃惊表情鼓掌表情

表情

  1. SEO推客
    SEO推客 @回复

    博主,反馈一个后台一个错误,“首页隐藏的分类ID”,你设置的类型是number,这样导致的后果是只能隐藏一个分类。

  2. 我爱动感单车网
    我爱动感单车网 @回复

    很久没来了,其实已经很久没怎么上网了,希望今后能够有一份不错的心情继续更新自己的博客,以及继续经常光顾大家的博客!

  3. 搜索引擎蜘蛛
    搜索引擎蜘蛛 @回复

    这个不错。

  4. 姜辰
    姜辰 @回复

    全能模板~~

  5. 钛客志
    钛客志 @回复

    可惜我的博客不是wordpress

  6. 21sta
    21sta @回复

    x . 21sta . com / bkdh 我这个博客导航为什么不是你那个效果?谢谢

  7. 龙笑天
    龙笑天 @回复

    [思考] 你觉得哪个好呢?

    • 懿古今
      懿古今2017-04-11 17:45  回复

      @龙笑天[思考] 青菜萝卜,各有所好吧。所以我这个站点就用这个跟随,boke112就懒得折腾,默认的跟随感觉比较醒目和引人注意

  8. 呆毛电脑配置网
    呆毛电脑配置网 @回复

    这功能还是可以的。就是文章不长,就没了。

  9. 神马电影网
    神马电影网 @回复

    哈哈 很好的功能 很强悍

  10. 闲鱼
    闲鱼 @回复

    知更鸟新版好像也是更新了这个侧栏跟随的

    • 懿古今
      懿古今2017-04-11 17:49  回复

      @闲鱼[偷笑] 我就是看到鸟哥这个跟随功能才想起龙笑天下投稿到boke112导航的这篇文章,大概看了一下鸟哥的方法,竟然也一样的,所以就折腾来玩玩

  11. 橘子书
    橘子书 @回复

    [鼓掌] 越来越好!

  12. 星空游戏
    星空游戏 @回复

    这个很棒啊

  13. maqingxi
    maqingxi @回复

    以前版本的跟随滚动好像有时会不显示,不知什么原因。