大多数网站都需要侧边栏能够跟随窗口滚动显示在右侧,这样能够提高右侧的文章曝光率.
不过我注意到大多数博客都用这个方法来放广告了,这也是中小站长的无奈,只能通过广告点击来获取微薄的广告收入.
之前我写了一篇: js代码实现右侧边栏智能跟随滚动条悬浮固定窗口位置浮动滚动
与本篇教程不同之处:
theia-sticky-sidebar 基于jquery实现.
theia-sticky-sidebar 不能只悬浮固定一个div,也许是我不会吧,我研究了一会,没有搞定.
网上有个很著名的侧边栏跟随滚动插件 theia-sticky-sidebar.js ,开箱即用.
你可以前往下载: https://github.com/WeCodePixels/theia-sticky-sidebar
下载包里面有个examples文件夹,里面有几个例子,你可以打开看看.
因为是英文版,所以我在这里详细解释一下.
<div class="wrapper"> <div class="content">...</div> <div class="sidebar">...</div> </div>
当然你也可以这样:
<div class="neirong wrapper"> <div class="zhuyao content">...</div> <div class="cebian sidebar">...</div> </div>
因为插件会自动添加div.theiaStickySidebar:
<div class="wrapper"> <div class="content"> <div class="theiaStickySidebar"> ... </div> </div> <div class="sidebar"> <div class="theiaStickySidebar"> ... </div> </div> </div>
说明: 内部的div.theiaStickySidebar是可选的,但是建议这样组织HTML结构。
如果你的结构不是这样,而且没有theiaStickySidebar,插件会自动为你添加这样一个div。如果你的侧边栏放置有广告或iframe,那么你可以安装上面的HTML结构来组织HTML代码。
只要有这几个名字,而且结构是这样的就可以了.
<script src="js/jquery.min.js"></script> <script src="js/theia-sticky-sidebar.js"></script> <script type="text/javascript"> jQuery(document).ready(function() { jQuery('.sidebar').theiaStickySidebar({ // Settings additionalMarginTop: 10 }); }); </script>
注意事项:
A: 如果你添加了没反应,请注意js文件添加顺序.
B: jquery.min.js 与 theia-sticky-sidebar.js 需要真实存在在你要引用的目录.
可用配置参数及说明:
containerSelector:侧边栏的父容器元素。如果没有指定直接使用侧边栏的父元素。
additionalMarginTop:可选值。指定侧边栏的顶部margin值,单位像素,默认为0像素。
additionalMarginBottom:可选值。指定侧边栏的底部margin值,单位像素,默认为0像素。
updateSidebarHeight:是否更新侧边栏的高度。默认为true。
minWidth:如果侧边栏的宽度小于这个值,将恢复为正常尺寸。默认值为0。(该选项用于响应式设计)
defaultPosition:侧边栏必须是非static的定位方式。默认为relative定位方式。
namespace:绑定事件的命名空间。默认为TSS。