Dragon
  • 真诚欢迎您的来访,留言,投稿!欢迎(Ctrl+D)收藏并经常访问本站 ---- https://www.ilxtx.com
  • 龙笑天下WordPress带用户中心和商城系统的博客CMS主题Dragon强势来袭,功能众多,总有一个中意你,心动吗? 『立即了解详情
龙笑天龙笑天  2016-05-10 01:35 龙笑天下 隐藏边栏 |   33 条评论  2,832 
文章评分 58 次,平均分 5.0

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

很多网站博客都喜欢用“侧栏跟随”的效果,也就是随着滚动条的滚动,而跟着滑动或者固定的效果;感觉非常的人性化,一来可以弥补当一个页面很长,但侧边栏太短的时候的空白,二来可以合理利用空间展示更多信息,可以大大的提高网站浏览量、文章点击率、广告点击量。这样子的效果很适合于文章的列表(比如月度排行、热门文章之类的),还有适合于广告联盟的展示。

关于“WordPress 侧边栏跟随固定浮动效果”,网上一搜一大把,可真正能实现的没有几个,再加上教程写的都不那么完整详细,大家操作过程中就会遇到这样那样的问题,如:侧边栏遮挡底部 footer、侧边栏会顶着页脚 footer 无限滚下去等等,苦不堪言,百试而得不到解决,最后无奈放弃。

在浏览国外的很多畅销的主题时,发现很多主题(如 Newspaper、wordpress 后台文章编辑器右边的侧栏)都启用了这样的侧边栏悬浮“滑动”效果,注意这里是“滑动”,不是常见的简单的“固定”!具体效果请见本站侧边栏随滚动条滚动的效果,如:这里 或者 这里 (滚动滚轮体会这 2 个链接里面的区别,这样一来,你的网页在浏览过程中就真正不会有空白的地方了!),也可参考下面的 demo 中的效果。

PS:对上面的删除线的解释,由于与我的“隐藏/显示侧边栏”相冲突,具体表现为:当侧边栏比主内容(#main-wrap-left)长,滚轮向上滚动时,点击“隐藏/显示侧边栏”按钮会导致模块错位,所以取消了主内容的滑动跟随(当然,如果贵站没有“隐藏/显示侧边栏”这样的功能,可以对主内容启用这个滑动跟随功能!),只启用侧边栏的滑动跟随效果.....希望有大神能告知解决方法!

一直想实现这样的效果,但无奈一直不知道怎么具体操作,无意中进了这个github页面,找到了方法:Theia Sticky Sidebar,万分感谢此作者!

下面我把自己怎么实现“智能侧边栏跟随固定浮动的效果“的方法步骤分享给大家,非常简单的步骤!觉得喜欢或有帮助,就顶一顶哈!

友情提示:此方法不局限于 wordpress 中使用,也不局限于侧边栏!

首先,你的 HTML 结构应是这样:

其中,sidebar是想要智能滑动的元素;

然后,引入 js:

其中,第一个 js,大多数主题已经带有了,可以不引入!第二个 theia-sticky-sidebar.js,可以去这里下载;第三个 js 中的.sidebar跟上面的对应,就是想要智能滑动的元素对应的选择器,class 或 id。

可用配置参数及说明:

  • containerSelector:侧边栏的父容器元素。如果没有指定直接使用侧边栏的父元素。
  • additionalMarginTop:可选值。指定侧边栏的顶部 margin 值,单位像素,默认为 0 像素。
  • additionalMarginBottom:可选值。指定侧边栏的底部 margin 值,单位像素,默认为 0 像素。
  • updateSidebarHeight:是否更新侧边栏的高度。默认为 true。
  • minWidth:如果侧边栏的宽度小于这个值,将恢复为正常尺寸。默认值为 0。(该选项用于响应式设计)
  • defaultPosition:侧边栏必须是非 static 的定位方式。默认为 relative 定位方式。
  • namespace:绑定事件的命名空间。默认为 TSS。

最后,好吧,没有下一步了,至此已经实现了部署。如果你也喜欢这样的侧边栏浮动效果的话,那就不要犹豫赶紧折腾吧,祝成功!

本文为原创文章,版权归所有,欢迎分享本文,转载请保留出处!

龙笑天
龙笑天 关注:41    粉丝:27 最后编辑于:2019-07-11
互助分享,互联网本该如此!

发表评论

最赞评论
  1. 龙笑天
    龙笑天 永久会员 博主 来自天朝的朋友 火狐浏览器 Windows 7

    @成航先森这个效果和你给出的是不一样的哦!
    PS:干嘛不放个链接,我很懒,不喜欢搜的!帮你补上了 http://www.capjsj.cn/wordpress_clxgjtjfdgsxg.html

  2. 叶子
    叶子 来自天朝的朋友 谷歌浏览器 46.0.2490.86 Windows 7 北京市朝阳区 中国数码港科技有限公司BGP节点

    文章很好,谢谢,我使用了,并在你的基础上结合我的主题写了一篇文章。http://www.wordpressleaf.com/2016_646.html,里面链接到你的文章。

  3. 风的味道 评论达人 LV.2 来自天朝的朋友 谷歌浏览器 39.0.0.0  CHM-TL00H Build/HonorCHM-TL00H) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/39.0.0.0 Mobile Safari/537.36 Appcan/3.1 广东省深圳市 联通

    效果不错,页面无空白处了

  1. L
    lilin 这家伙可能用了美佬的代理 谷歌浏览器 64.0.3282.140 Windows 10 美国 马里兰州圣路易斯市Chater通讯公司

    厲害,感謝大佬分享。之前各種國內國外摘抄,結果都是很多 bug,這個很完美。

    13楼 2019-05-19 15:26
  2. 醉后的力量 来自天朝的朋友 谷歌浏览器 73.0.3683.86 Linux 广东省深圳市南山区 电信

    你这个方法还是不行啊,这个侧边栏顶部设置是无效的,导航滑动的时候,侧边栏顶部有一部分显示不全(位置偏上了),而你那个参数改了也无效……

    12楼 2019-05-13 18:18
  3. nice
    nice 评论达人 LV.2 来自天朝的朋友 火狐浏览器 65.0 Windows 10 广东省东莞市 (南城区)电信

    这个测试还是 侧边栏会顶着页脚 footer 无限滚下去呢 [衰]

    11楼 2019-02-21 10:42
  4. webkv
    webkv 来自天朝的朋友 谷歌浏览器 70.0.3538.110 Windows 8.1 湖北省武汉市 电信

    一直想离开插件用代码实现,但目前还米有更好的办法代替 sections

    10楼 2018-11-27 18:39
  5. 旭缘 Nigeria 谷歌浏览器 45.0.2454.101 Windows 7 尼日利亚

    龙大,之前没注册帐号时的评论怎么看不到啊。。我看你好像回复我了啊。

    9楼 2017-07-06 22:03
  6. 猎乐网
    猎乐网 评论达人 LV.1 来自天朝的朋友 谷歌浏览器 59.0.3071.109 Windows 7 辽宁省抚顺市 电信

    这个好, 刚想找一个

    8楼 2017-07-06 17:30
  7. 旭缘 Nigeria 谷歌浏览器 45.0.2454.101 Windows 7 尼日利亚

    你的博客太棒了。很漂亮!

    7楼 2017-07-06 02:51
  8. 三十
    三十 来自天朝的朋友 谷歌浏览器 45.0.2454.101 Windows 10 福建省厦门市 鹏博士长城宽带

    您好,在 WordPress 加上了之后侧边栏会一直往下滚,左边内容部分拉过了头,页脚还不出来,可有办法解决呢?

    6楼 2017-01-13 06:17
  9. 旧梦
    旧梦 来自天朝的朋友 火狐浏览器 50.0 Windows 10 湖北省武汉市 联通

    感觉实际 操作起来跟演示站有点区别哎。

    5楼 2016-12-21 16:58
  10. 叶子
    叶子 来自天朝的朋友 谷歌浏览器 46.0.2490.86 Windows 7 北京市朝阳区 中国数码港科技有限公司BGP节点

    文章很好,谢谢,我使用了,并在你的基础上结合我的主题写了一篇文章。http://www.wordpressleaf.com/2016_646.html,里面链接到你的文章。

    4楼 2016-08-03 16:29
  11. boke112导航
    boke112导航 评论达人 LV.3 来自天朝的朋友 谷歌浏览器 45.0.2454.101 Windows 7 广西南宁市 电信

    侧边悬浮按钮感觉一个返回顶部,一个直达评论,最多还加上一个直达底部就够了,多了感觉看起来有点烦

    地板 2016-05-20 21:47
  12. 成航先森
    成航先森 评论达人 LV.3 来自天朝的朋友 Netscape Navigator 5.0 iPhone iPhone OS 8_1 like Mac OS X 四川省 移动数据上网公共出口

    这个我也分享过。。。

    板凳 2016-05-14 08:39
  13. 风的味道 评论达人 LV.2 来自天朝的朋友 谷歌浏览器 39.0.0.0  CHM-TL00H Build/HonorCHM-TL00H) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/39.0.0.0 Mobile Safari/537.36 Appcan/3.1 广东省深圳市 联通

    效果不错,页面无空白处了

切换注册

登录

短信快捷登录 忘记密码 ?

您也可以使用第三方帐号快捷登录

切换登录

注册

验证码

您也可以使用第三方帐号一键快捷注册

×

感谢您对龙笑天的支持,么么哒~

支付宝打赏 龙笑天
请扫码随意打赏

打开支付宝扫一扫,即可进行扫码打赏哦

龙笑天下 - 分享悲伤;共享快乐

扫一扫二维码分享