网站有多栏布局时,侧边栏高度不够会显示大片空白;Theia Sticky Sidebar 就可以让网站的所有侧边栏,在网页上下滚动时,永久可见,类似于固定侧边栏。
演示地址:
3 栏演示 4 栏演示 Bootstrap 4 演示 Foundation 演示首先,你需要下载
然后,引入 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、Typecho、ZBlog、Emlog、多说等平台的评论神器 javascr…
登陆数据库,然后执行 sql 命令: UPDATE Wp_links SET link_target…
共有0条评论
评论本文