网站侧边栏下拉跟随浮动完美解决方法theia-sticky-sidebar

jquery滚动固定侧边栏插件theia-sticky-sidebar.js,该jquery滚动固定侧边栏插件在页面向下滚动时,可以将左侧或右侧侧边栏固定在页面中跟随下拉移动。

1、文件下载

有兴趣的可以去Github去看看源码,也可以拉倒底部下载源码。

2、引入js文件

在网页头部引入jquery.min.js文件,一般大部分网站默认都是有这个文件的,没有的直接引入cdn代码库链接,省事

<script type="text/javascript" src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script> 

再把下载的theia-sticky-sidebar.js文件上传到你网站目录,也引用一下

<script type="text/javascript" defer src="你的域名目录/theia-sticky-sidebar.js"></script> 

3、设置插件

这里如果你是从github里下载的源码,就要在页面头部放入以下代码

<script type="text/javascript">
  jQuery(document).ready(function() {
    jQuery('.sidebar//修改我就行').theiaStickySidebar({//这里放上边栏的DIV标签ID或CLASS
      // Settings
      additionalMarginTop: 30
    });
  });
</script>

如果你是下载我底部的文件,我是把上面的代码放到theia-sticky-sidebar.js的最后,你只需要打开theia-sticky-sidebar.js修改DIV标签即可。

jQuery(document).ready(function() {
jQuery('.sidebar//修改我就行').theiaStickySidebar({//这里放上边栏的DIV标签ID或CLASS
// Settings
additionalMarginTop: 120
});
});

特别要注意的是,如果你左右都有浮动侧栏,这里要写二个DIV的标签,一个左侧DIV标签,一个右侧DIV标签;

//样式如下
jQuery('.site-content, .sidebar').theiaStickySidebar({

4、其他配置参数

打开theia-sticky-sidebar.js开关,有一些插件的基本配置,可以不配置,也可以根据需求修改:
containerSelector:侧边栏的父容器元素。如果没有指定直接使用侧边栏的父元素。
additionalMarginTop:可选值。指定侧边栏的顶部margin值,单位像素,默认为0像素。
additionalMarginBottom:可选值。指定侧边栏的底部margin值,单位像素,默认为0像素。
updateSidebarHeight:是否更新侧边栏的高度。默认为true。
minWidth:如果侧边栏的宽度小于这个值,将恢复为正常尺寸。默认值为0。(该选项用于响应式设计)
defaultPosition:侧边栏必须是非static的定位方式。默认为relative定位方式。
namespace:绑定事件的命名空间。默认为TSS。

在线下载列表
文章来源: 搜其一
本文地址: https://www.soqiy.com/web/1984.html
声明:本文收集转载自互联网,版权归原作者所有,转载目的在于传递更多的信息,并不代表本网站的观点和立场。如发现本站文章存在内容、版权或其它问题,烦请联系Email:xuxlc@qq.com ,我们将及时删除。
上一篇

为您推荐

联系我们

联系我们

在线咨询: QQ交谈

邮箱: xuxlc@qq.com

工作时间:周一至周五,9:00-17:30,节假日休息

关注微信
微信扫一扫关注我们

微信扫一扫关注我们

返回顶部