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

前端 195
3个月前

网站有多栏布局时,侧边栏高度不够会显示大片空白;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 获取文章内所有图片

将下列代码添加至functions.php function hui_get_thumbnail( …

122
3个月前
WordPress 不同分类使用不同的文章模板

方法一:根据模板文件名进行判断 1.将下面的代码添加到当前主题的 functions.php 文件:…

141
3个月前
WordPress 纯代码实现外链跳转

第一步、新建go文件夹和index.php 新建一个go文件夹,然后在里面加一个index.php,…

168
3个月前

共有0条评论

评论本文