jQuery插件 - Theia Sticky Sidebar 侧边栏智能跟随并固定范围浮动效果

所属分类:菜单导航

晴宇资源 1610 4
jQuery插件 - Theia Sticky Sidebar 侧边栏智能跟随并固定范围浮动效果
 查看演示  免费下载

没有金币?,点 这里充值

开通vip会员更划算,去开通Vip

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



免责声明:本资源来自互联网或网友转载,不代表本站之观点和立场。如有侵犯您的合法权益,请及时联系我们,将在48小时内删除!

全部评论(0)
相关推荐

jQuery鼠标移动菜单滑动效果

jQuery滑动导航插件 可扩展 jQuery Easing
1533 3

Switch开关按钮

switch开关,高效,可修改
1911 29

原生js拾色器插件colPicker

纯色颜色编辑器、拾色器插件colPicker
1353 8