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

前端 486
9个月前

网站有多栏布局时,侧边栏高度不够会显示大片空白;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 class="theiaStickySidebar">
    ...
    </div>
  </div>
  <div class="sidebar">
    <div class="theiaStickySidebar">
    ...
    </div>
  </div>
</div>

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

可用配置参数及说明:

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

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

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

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

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

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

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

标签: , ,

相关文章

WordPress 自动为新文章添加已使用过的历史标签非插件版

每当我们写文章的时候,都需要手动给 WordPress 文章添加标签,这样既能给访问者明确这篇文章的…

349
4个月前
评论神器一键自动填写昵称、邮箱和网址

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

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

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

233
4个月前

共有0条评论

评论本文