WordPress 侧边栏触底固定jQuery插件 Theia Sticky Sidebar

前端 338
7个月前

网站有多栏布局时,侧边栏高度不够会显示大片空白;Theia Sticky Sidebar 就可以让网站的所有侧边栏,在网页上下滚动时,永久可见,类似于固定侧边栏。

WordPress 侧边栏触底固定 jQuery 插件 Theia Sticky Sidebar

演示地址:

3 栏演示 4 栏演示 Bootstrap 4 演示 Foundation 演示

首先,你需要下载

下载地址

theia-sticky-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>

让你的 HTML 结构成这样


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

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

可用配置参数及说明:

containerSelector:侧边栏的父容器元素。如果没有指定直接使用侧边栏的父元素。
additionalMarginTop:可选值。指定侧边栏的顶部 margin 值,单位像素,默认为 0 像素。
additionalMarginBottom:可选值。指定侧边栏的底部 margin 值,单位像素,默认为 0 像素。
updateSidebarHeight:是否更新侧边栏的高度。默认为 true。
minWidth:如果侧边栏的宽度小于这个值,将恢复为正常尺寸。默认值为 0。(该选项用于响应式设计)
defaultPosition:侧边栏必须是非 static 的定位方式。默认为 relative 定位方式。
namespace:绑定事件的命名空间。默认为 TSS。

标签: ,

相关文章

评论神器一键自动填写昵称、邮箱和网址

适用WordPress、Typecho、ZBlog、Emlog、多说等平台的评论神器 javascr…

118
1个月前
WordPress 利用sql命令批量修改友情链接全部在新窗口打开

登陆数据库,然后执行 sql 命令: UPDATE Wp_links SET link_target…

86
1个月前
WordPress 网站优化加速

wodpress安装好后,为了适应国内网络环境,有些东西需要调整或是移除,可以有效的提高访问速度,主…

135
2个月前

共有0条评论

评论本文