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

投稿  龙笑天下 2016-09-08 阅读 238 次 评论 23 条

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

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

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

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

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

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

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

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

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

  1. <div class="wrapper">
  2.   <div class="content">
  3.     ...
  4.   </div>
  5.   <div class="sidebar">
  6.     ...
  7.   </div>
  8. </div>

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

然后,引入js:

  1. <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
  2. <script type="text/javascript" src="theia-sticky-sidebar.js"></script>
  3. <script type="text/javascript">
  4.   jQuery(document).ready(function() {
  5.     jQuery('.sidebar').theiaStickySidebar({
  6.       // Settings
  7.       additionalMarginTop: 30
  8.     });
  9.   });
  10. </script>

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

最后,好吧,没有下一步了,至此已经实现了部署。如果你也喜欢这样的侧边栏浮动效果的话,那就不要犹豫赶紧折腾吧,祝成功!有什么疑问,可留言或去问答中心提问,我会尽力解答0.0

本文地址:http://boke112.com/3473.html
关注我们:请关注一下我们的微信公众号:扫描二维码,公众号:aiboke112
温馨提示:文章内容仅代表作者个人观点,不代表boke112导航赞同其观点和对其真实性负责!
版权声明:本文为投稿文章,感谢 龙笑天下 的投稿,版权归原作者所有,欢迎分享本文,转载请保留出处!
WordPress免费响应式主题:Nana
boke112导航的征稿启事及稿件要求

发表评论

呲牙憨笑坏笑偷笑色微笑抓狂睡觉酷流汗鼓掌大哭可怜疑问晕惊讶得意尴尬发怒奋斗衰骷髅啤酒吃饭礼物强弱握手OKNO勾引拳头差劲爱你

表情

  1. 成航先森
    成航先森 【镇长】 @回复

    这个不错,不错

  2. 西狂
    西狂 【镇长】 @回复

    固定浮动侧边栏原来是这样做的,又涨了知识

  3. 南通SEO
    南通SEO 【镇长】 @回复

    我的标签是自动跟随的,便于用户浏览

  4. 刘传鹏博客
    刘传鹏博客 【镇长】 @回复

    直接用插件JQuery.pin就可以实现这个效果

  5. 金榜台博客
    金榜台博客 【县长】 @回复

    哎!!都是WP的,用不上啊

  6. 192.168.1.1
    192.168.1.1 【农民】 @回复

    右侧固定漂浮,通常用来放广告了。

  7. benen005
    benen005 【镇长】 @回复

    确实简单

  8. 真我风采
    真我风采 【县长】 @回复

    许多主题是可以自行选择设置的。

  9. 龙砚庭博客
    龙砚庭博客 【市长】 @回复

    这个用来当侧栏广告最好。

  10. 我爱动感单车网
    我爱动感单车网 【省长】 @回复

    [偷笑] 我所使用的主题,它是怎样的就让它继续怎样,对于这些太细节的东西本人不是很在意,再有貌似自己也折腾不来,还是将就些比较好(省的麻烦)。

  11. 唯历史
    唯历史 【总理】 @回复

    每日新东西,赞一下

  12. 增达信购
    增达信购 【农民】 @回复

    偶然来访,受益良多!

  13. vultr
    vultr 【农民】 @回复

    这个一般用在侧栏滚动广告或者特定的模块。

  14. 威客兼职
    威客兼职 【农民】 @回复

    哇咔咔,牛掰呀!

  15. 小萝博客
    小萝博客 【市长】 @回复

    贵站分享的主题里面就有

  16. 用友软件
    用友软件 【镇长】 @回复

    这个就很牛了

  17. 龙笑天
    龙笑天 【县长】 @回复

    哈哈~有个专栏了~~ [得意]

  18. Koolight
    Koolight 【省长】 @回复

    厉害,爱折腾的高手!

  19. 爱时尚
    爱时尚 【市长】 @回复

    这个zblog也可以用吗?

    • 雅兮网
      雅兮网 【市长】 @回复

      @爱时尚 前端效果不限制于任何建站程序,哪怕是没有后台程序的静态页面 依然可以,因为这是前端 [坏笑]

  20. 捌零男人
    捌零男人 【镇长】 @回复

    之前用的一个纯CSS右侧固定浮动,效果欠佳,后来还是用了一个JS浮动效果。
    CSS能解决的不用JS….看到很多网站head里面一大串JS,body之前又一大串JS