益吾库源码下载jQuery插件:侧边栏智能跟随固定浮动theia-sticky-sidebar

jQuery插件:侧边栏智能跟随固定浮动theia-sticky-sidebar

jQuery插件:侧边栏智能跟随固定浮动theia-sticky-sidebar
2020年08月26日 06:09:42益点益滴源码下载338

资源介绍

通常我们所见很多网站都是2栏或3栏布局,而且很多时候每一栏内容并不等高,在网页向下滚动时高度较小那一栏就会空白,这是很多“强迫症”网友不能忍受的现象。然而,我们似乎看到过有的网页在上下滚动时,侧边栏可以智能跟随浮动,是怎么做到的呢?其实这种效果可以自写JS代码实现(逻辑有点复杂),也可以用插件实现,theia-sticky-sidebar.js就是其中之一。

theia-sticky-sidebar.js插件是一款实现jquery滚动固定侧边栏的插件。该jquery滚动固定侧边栏插件在页面向下滚动时,可以将左侧或右侧侧边栏固定在页面中。它特别适合于多列布局的页面,并能和bootstrap或Foundation配合使用。

本段代码兼容目前最新的各类主流浏览器,适用浏览器:搜狗、360、FireFox(建议)、Chrome、Safari、Opera、傲游、世界之窗,不支持IE8及以下浏览器。

首先,网站页面HTML结构必须是这样:

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

其中,sidebar是需要智能滑动的侧边栏元素;

接下来引入JS文件:

<script type="text/javascript" src="http://libs.baidu.com/jquery/2.1.1/jquery.js"></script>
<script type="text/javascript" src="js/theia-sticky-sidebar.js"></script>
<script type="text/javascript">
  jQuery(document).ready(function() {
    jQuery('.sidebar').theiaStickySidebar({
      // Settings
      additionalMarginTop: 30
    });
  });
</script>

jquery库很多网站本身就有应用,如果已有引入则不必重复加载。theia-sticky-sidebar.js需要下载后上传到网站并引入,配置js代码中的.sidebar与HTML结构的边栏元素对应即可,可以是class或id。

配置参数及说明:

containerSelector:侧边栏的父容器元素。如果没有指定直接使用侧边栏的父元素。

additionalMarginTop:可选值。指定侧边栏的顶部margin值,单位像素,默认为0像素。

additionalMarginBottom:可选值。指定侧边栏的底部margin值,单位像素,默认为0像素。

updateSidebarHeight:是否更新侧边栏的高度。默认为true。

minWidth:如果侧边栏的宽度小于这个值,将恢复为正常尺寸。默认值为0。(该选项用于响应式设计)

defaultPosition:侧边栏必须是非static的定位方式。默认为relative定位方式。

namespace:绑定事件的命名空间。默认为TSS。

更多介绍和演示还可以去插件官网了解。如果你也喜欢这样的侧边栏浮动效果的话,那就不要犹豫赶紧折腾吧!

超赞,真给力!嗯,必须鼓励~

打赏 1

欢迎点评!或反馈疑问...

支持Ctrl+Enter提交
暂无留言,快抢沙发!
账号:mxy310@163.com[复制]
账号:77940140[复制]

深切哀悼

抗击新冠肺炎疫情斗争牺牲烈士和逝世同胞!

×
M