当前位置首页建站

通过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>

其中,第一个jquery.min.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。


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

声明:除非注明,否则均为淘折网原创文章,转载或复制请以超链接形式并注明出处。如果您觉得本文对您有所帮助的话,可以在下方点赞或者打赏哦(*^_^*)
分享到:
阿里云服务器优惠券

发表评论

请文明发言