首页 Wordpress WordPress 边栏跟随浮动完美解决方法theia-sticky-sidebar

WordPress 边栏跟随浮动完美解决方法theia-sticky-sidebar

GavinWu 2022年04月23日 8:04 Wordpress 110 Views

WordPress 边栏跟随浮动完美解决方法theia-sticky-sidebar|微言心语
今天我推荐给大家一款jquery滚动固定侧边栏插件theia-sticky-sidebar.js,该jquery滚动固定侧边栏插件在页面向下滚动时,可以将左侧或右侧侧边栏固定在页面中。下面把方法分享给大家:、

1、文件下载

有兴趣的可以去Github去看看源码,也可以下载的这边的源码。

2、引入js文件

不多说了,强调一点必须先加载js库才能支持插件使用,比如可以http://code.jquery.com/jquery.min.js。你可以参考我之前的文章《jquery所有版本下载》里选择适合的jq版本。
然后再引入上面下载的theia-sticky-sidebar.js文件,可以参考WordPress 加载Javascript和CSS的方法

3、设置插件

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

1
2
3
4
5
6
7
8
<script type="text/javascript">
  jQuery(document).ready(function() {
    jQuery('.sidebar').theiaStickySidebar({//这里放上边栏的DIV标签ID或CLASS
      // Settings
      additionalMarginTop: 30
    });
  });
</script>

如果你是下载我自己的文件,我是把上面的代码放到theia-sticky-sidebar.js的最后,修改DIV标签即可。

1
2
3
4
5
6
jQuery(document).ready(function() {
jQuery('.site-content, .sidebar').theiaStickySidebar({
// Settings
additionalMarginTop: 120
});
});

特别要注意的是,这里要写二个DIV的标签,一个左侧DIV标签,一个右侧DIV标签;

4、其他配置参数

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

相关文章

  • WordPress 边栏文章作者小工具

    WordPress 边栏文章作者小工具

    一直在找有像类似腾讯社区的边栏文章作者信息面板的方法,终于在雅兮网找到了适合的方法。效果如下: 1、注册边栏工具,代码如…

七牛

发表评论

QR Code

本页二维码