高性能js固定侧边栏插件

sticky-sidebar.js是一款高性能的js固定侧边栏插件。通过sticky-sidebar.js插件,你可以快速的为网站制作出固定侧边栏效果。它的特点还有:

  • 在页面滚动是,不需要重新计算所有的坐标,金辉计算必要的坐标。
  • 页面平滑滚动,不会产生页面滚动侧边栏滞后的感觉。
  • 当侧边栏过高或过短时,会自动计算侧边栏的位置。
  • 插件没有任何依赖,使用简单。

安装

可以通过bower或npm来安装sticky-sidebar.js固定侧边栏插件。

bower install sticky-sidebar
npm install sticky-sidebar                  
                

使用方法

在页面中引入sticky-sidebar.js文件。

<script type="text/javascript" src="path/to/js/sticky-sidebar.js"></script>                  
                
HTML结构

要使用sticky-sidebar.js固定侧边栏插件,你的网页结构应该如下面的样子。

<div class="main-content">
    <div class="sidebar">
        <div class="sidebar__inner">
            <!-- 侧边栏内容 -->
        </div>
    </div>
    <div class="content">
        <!-- 页面内容 -->
    </div>
</div>
                

你也可以将sticky-sidebar.js固定侧边栏插件和jquery或Zepto结合使用。要作为jquery插件来使用,只需要引入jquery.sticky-sidebar.js文件即可,例如:

<script type="text/javascript" src="path/to/js/jquery.js"></script>
<script type="text/javascript" src="path/to/js/jquery.sticky-sidebar.js"></script>

<script type="text/javascript">
  $('#sidebar').stickySidebar({
    topSpacing: 60,
    bottomSpacing: 60
  });
</script>                  
                

sticky-sidebar.js固定侧边栏插件的github地址为:https://github.com/abouolia/sticky-sidebar

在线预览    源码下载

爱编程-编程爱好者经验分享平台


扫描下方二维码,加入前端微信群,共同交流进步!

文章评论

  

版权所有 爱编程 © Copyright 2012. w2bc.com. All Rights Reserved.
闽ICP备12017094号-3