jQuery插件 - theia-sticky-sidebar - 智能侧边栏跟随固定范围浮动的效果

 之前发过一篇关于跟随浮动在限制区域内的jquery插件，《jquery 滚动跟随 到达底部时会停止跟随特效代码》，但兼容性不太好，包括chrome以及firefox都可能无效，今天写另一个zblog主题时发现急需这个功能，所以忙不迭的寻找其它类似jquery插件！

今天就来介绍一款兼容性比较好的，jQuery插件 - Theia Sticky Sidebar，可以智能侧边栏跟随固定范围浮动的效果！

首先，你的HTML结构应是这样：

div class="wrapper">
      div class="content">
        ...  /div>
      div class="sidebar">
        ...  /div>
    /div>
    

 其中，sidebar是想要智能滑动的元素；

然后引入JS文件：

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。

最后，好吧，没有下一步了，至此已经实现了部署。如果你也喜欢这样的侧边栏浮动效果的话，那就不要犹豫赶紧折腾吧，祝成功！

从github下载包：

theia-sticky-sidebar-master.zip

github：

https://github.com/WeCodePixels/theia-sticky-sidebar

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！