
一款兼容性比较好的,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。