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

2018年4月17日20:36:02 2 121

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

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

在浏览国外的很多畅销的主题时,发现很多主题(如 Newspaper、wordpress 后台文章编辑器右边的侧栏)都启用了这样的侧边栏悬浮“滑动”效果,注意这里是“滑动”,不是常见的简单的“固定”!具体效果请见本站侧边栏随滚动条滚动的效果。

一直想实现这样的效果,但无奈一直不知道怎么具体操作,无意中进了这个看到龙笑天下分享的侧边栏浮动文章,找到了方法:Theia Sticky Sidebar,万分感谢此作者!

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

首先,我的 HTML 结构是这样:

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

其中,col-right是想要智能滑动的元素;然后,引入 js:

  1. <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">  
  2.   jQuery(document).ready(function() {  
  3.     jQuery(’.sidebar’).theiaStickySidebar({  
  4.       // Settings  
  5.       additionalMarginTop: 30  
  6.     });  
  7.   });  
  8. </script>  

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

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

 

js文件下载

GitHub

weinxin
微信公众号
博客微信公众号,欢迎关注。

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:2   其中:访客  1   博主  1

    • avatar 鹏仔哥 0

      弄个响应式玩玩

        • avatar 萧瑟 博主

          @鹏仔哥 嗯,很简单,调用一个JS就可以实现。