jQuery固定浮动DIV效果插件 - stickyMojo.js

转自：http://site518.net/jquery-fixed-sticky-sidebar-stickymojo/

演示地址：http://site518.net/demo/mojo/demo.htm#introduction

今天给大家推荐一个不随滚动条滚动的固定浮动 DIV 效果插件 - stickyMojo.js。

　　在介绍这个插件之前我们先回顾下之前所推荐过的同类插件：
　　　　jQuery插件实现DIV浮动在页面固定位置中

　　stickyMojo.js 是一个简单易用的轻量级 jQuery 插件，可让你轻松实现网页元素浮动于页面固定位置中的效果。并且它仅有 2kb 大小，非常适合于在项目中使用。

如何使用

　　首先在页面的 head 中引入 jQuery 框架和 stickyMojo.js 插件

<script src="jquery.min.js"></script>
<script src="stickyMojo.js"></script>

　　然后添加 HTML 框架代码，如下

<div id="demo">
<div id="sidebar">
<p>sidebar</p>
</div>
<div id="main">
<p>main</p>
</div>
<div id="footer">
Footer
</div>
</div>

　　之后再针对这个结构设置 CSS 样式，如

body {
margin:0;
padding:0;
}
#main {
width:750px;
height: 750px; /*要高于sidebar的高度*/
padding: 25px;
float: left;
background-color: #fafafa;
}
#sidebar {
width: 120px;
background-color: #ccc;
min-height: 200px;
margin: 10px 0 15px 0;
padding: 15px 10px;
float: left;
}
#footer {
width: 940px;
clear:both;
background-color: #ccc;
height: 500px;
margin-top: 100px;
}
#demo {
width: 940px; /* 设置总宽度 */
margin-left: auto;
margin-right: auto;
}

　　最后初始化就完成了，赶紧去看看演示吧~~

$('#sidebar').stickyMojo({footerID: '#footer', contentID: '#main'});

下载　演示

 欢迎加入我的知识星球！