首页 > 文章资讯 > 技术教程 > zblog教程 > zblog智能侧边栏跟随固定范围浮动的效果

zblog智能侧边栏跟随固定范围浮动的效果

时间：2022年08月14日

来源：网络

编辑：佚名

其实关于主题家这个模板我之前一直在打算找一款插件，可以自动调整右侧的跟随效果，但是苦于没有思路一直没整，前几天网友又反映到这个问题了，于是重新整理查找资料，我记得之前写过一篇“zblogphp侧栏跟随代码教程，看了就会。”的博文，但是这个仅仅针对右侧某个栏目跟随，而且不能判断整体。所以在网上找相关功能，整理之后代码如下：
先声明，这个不一定会使用所有的网站，如果没有效果，自己多尝试几次吧，我的主题会增加这个功能，无需手动修改。
首先，你的HTML结构应是这样：
复制代码JavaScript
<div class="wrapper">
<div class="content">
...
</div>
<div class="sidebar">
...
</div>
</div>
其中“sidebar”就是侧栏智能跟随的容器名称，如果你的博客或者网站不是采用这种框架就得自己慢慢摸索，如果是，那么继续
引入JS文件：
复制代码JavaScript
<script type="text/javascript" src="sticky-sidebar.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('.sidebar').theiaStickySidebar({
additionalMarginTop: 30
});
});
</script>
其中，“sidebar”，就是想要智能滑动的元素对应的选择器class或id。
还有“additionalMarginTop”值为 30元素，只是侧栏浮动距离网站顶端的距离，我也说不明白了，看图。

zblogPHP智能侧边栏跟随固定范围浮动的效果
嗯哪，就这如图这样婶儿的！
可用配置参数及说明：
containerSelector：侧边栏的父容器元素。如果没有指定直接使用侧边栏的父元素。 additionalmarginTop：可选值。指定侧边栏的顶部margin值，单位像素，默认为0像素。 additionalMarginBottom：可选值。指定侧边栏的底部margin值，单位像素，默认为0像素。 updateSidebarHeight：是否更新侧边栏的高度。默认为true。 minWidth：如果侧边栏的宽度小于这个值，将恢复为正常尺寸。默认值为0。（该选项用于响应式设计） defaultPosition：侧边栏必须是非static的定位方式。默认为relative定位方式。 namespace：绑定事件的命名空间。默认为TSS。
好了，就这样吧，哦对了，还有这个js没给你们，不过，我想你们应该知道怎么下载这个js吧，对的，我的网站上就有啊。哈哈哈，拿走不谢。

新闻资讯更多

猜你需要