很多网站博客都喜欢用“侧栏跟随”的效果,也就是随着滚动条的滚动,而跟着滑动或者固定的效果;感觉非常的人性化,一来可以弥补当一个页面很长,但侧边栏太短的时候的空白,二来可以合理利用空间展示更多信息,可以大大的提高网站浏览量、文章点击率、广告点击量。这样子的效果很适合于文章的列表(比如月度排行、热门文章之类的),还有适合于广告联盟的展示。
关于“WordPress 侧边栏跟随固定浮动效果”,网上一搜一大把,可真正能实现的没有几个,再加上教程写的都不那么完整详细,大家操作过程中就会遇到这样那样的问题,如:侧边栏遮挡底部 footer、侧边栏会顶着页脚 footer 无限滚下去等等,苦不堪言,百试而得不到解决,最后无奈放弃。
在浏览国外的很多畅销的主题时,发现很多主题(如 Newspaper、wordpress 后台文章编辑器右边的侧栏)都启用了这样的侧边栏悬浮“滑动”效果,注意这里是“滑动”,不是常见的简单的“固定”!具体效果请见本站侧边栏随滚动条滚动的效果,如:这里 或者 这里 (滚动滚轮体会这 2 个链接里面的区别,这样一来,你的网页在浏览过程中就真正不会有空白的地方了!),也可参考下面的 demo 中的效果。
PS:对上面的删除线的解释,由于与我的“隐藏/显示侧边栏”相冲突,具体表现为:当侧边栏比主内容(#main-wrap-left)长,滚轮向上滚动时,点击“隐藏/显示侧边栏”按钮会导致模块错位,所以取消了主内容的滑动跟随(当然,如果贵站没有“隐藏/显示侧边栏”这样的功能,可以对主内容启用这个滑动跟随功能!),只启用侧边栏的滑动跟随效果.....希望有大神能告知解决方法!
一直想实现这样的效果,但无奈一直不知道怎么具体操作,无意中进了这个github页面,找到了方法:Theia Sticky Sidebar,万分感谢此作者!
下面我把自己怎么实现“智能侧边栏跟随固定浮动的效果“的方法步骤分享给大家,非常简单的步骤!觉得喜欢或有帮助,就顶一顶哈!
友情提示:此方法不局限于 wordpress 中使用,也不局限于侧边栏!
首先,你的 HTML 结构应是这样:
1 2 3 4 5 6 7 8 |
<div class="wrapper"> <div class="content"> ... </div> <div class="sidebar"> ... </div> </div> |
其中,sidebar
是想要智能滑动的元素;
然后,引入 js:
1 2 3 4 5 6 7 8 9 10 |
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> <script type="text/javascript" src="theia-sticky-sidebar.js"></script> <script type="text/javascript"> jQuery(document).ready(function() { jQuery('.sidebar').theiaStickySidebar({ // Settings additionalMarginTop: 30 }); }); </script> |
其中,第一个 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。
最后,好吧,没有下一步了,至此已经实现了部署。如果你也喜欢这样的侧边栏浮动效果的话,那就不要犹豫赶紧折腾吧,祝成功!
本文为原创文章,版权归龙笑天下所有,欢迎分享本文,转载请保留出处!
龙大,之前没注册帐号时的评论怎么看不到啊。。我看你好像回复我了啊。
@旭缘可以看到啊,就在 8 楼吧~
@龙笑天看到啦,8 楼不是我啦。7 楼是我哈
@旭缘好吧...![[晕] [晕]](https://www.ilxtx.com/wp-content/themes/lxtx/images/smilies/yun.gif)
这个好, 刚想找一个
@猎乐网能用上就好~ 贵站的模板好清爽~![[赞] [赞]](https://www.ilxtx.com/wp-content/themes/lxtx/images/smilies/zan.gif)
你的博客太棒了。很漂亮!
@旭缘
谢谢认可~
PS:贵站用的畅言我都不好留言了... 另外,贵站的“关于博主”链接 404 哦
@龙笑天我的小站刚上线,还没弄好关于博主呢,不知道写点啥。用自带的不会弄会员系统。就拿畅言凑数啦
@旭缘嗯,还是有些地方需要完善下,就写点自己的个人经验就 OK 了,自己感兴趣的也可以写哈~
@龙笑天龙大你看过我的小站了?有啥建议,我小是小白哇。
@旭缘
同是小白哈~ 貌似就首页有点小 BUG~ 还有那个链接 404 问题。PS:贵站特效挺足的啊~
@龙笑天404 最近就解决。但你说的 bug 是什么问题呢?我用查看元素没发现有错误哇
@旭缘截图发你 QQ 了哦~
您好,在 WordPress 加上了之后侧边栏会一直往下滚,左边内容部分拉过了头,页脚还不出来,可有办法解决呢?
@三十这个还真不大清楚,估计你找的悬浮固定代码不给力~~ 可以再多找找试试哈
@龙笑天问题解决了,看了下主题代码,里面内容项和侧边栏没有被写 DIV 包裹。
感觉实际 操作起来跟演示站有点区别哎。
@旧梦嗯,这个也要自行折腾下~~
文章很好,谢谢,我使用了,并在你的基础上结合我的主题写了一篇文章。http://www.wordpressleaf.com/2016_646.html,里面链接到你的文章。
侧边悬浮按钮感觉一个返回顶部,一个直达评论,最多还加上一个直达底部就够了,多了感觉看起来有点烦
@boke112导航我刚开始用这个主题的时候也是和你一样的感觉,但用久了看久了就感觉还不错,我还想在左边再加上一列悬浮的分享按钮呢...![[偷笑] [偷笑]](https://www.ilxtx.com/wp-content/themes/lxtx/images/smilies/tx.gif)
这个我也分享过。。。
@成航先森这个效果和你给出的是不一样的哦!
PS:干嘛不放个链接,我很懒,不喜欢搜的!帮你补上了 http://www.capjsj.cn/wordpress_clxgjtjfdgsxg.html
效果不错,页面无空白处了