高性能js固定侧边栏插件

当前位置:主页 > jQuery库 > 菜单和导航 > 高性能js固定侧边栏插件
小编推荐: 掘金是国内最活跃的技术社区,从 jQuery到vue,从前端教程到开源库,无论是入门还是进阶,来掘金你不会错过前端开发的任何一个技术干货。
高性能js固定侧边栏插件
分享:

    插件介绍

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

    浏览器兼容性

    浏览器兼容性
    时间:2017-10-10
    阅读:
简要教程

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

网友评论