写网站的应该都有一个共同的爱好，就是喜欢收集优秀的代码案例，不管事自己写的还是无意中看到的，只有优秀总会忍不住的拿来研究一番，然后整理出来以便开发的时候使用，今天给大家分享一段简洁代码精炼的侧边顶部固定层的效果，这个方法是用jQuery实现的，所以请检查您的页面是否引入了jQuery脚本版本1.7以上即可。
代码分享
其实这个特效相对来说还是比较复杂的，首先我们要使用JavaScript进行窗口监听，当设定的div距离顶部一定距离的时候（这个值自己设置的）个div添加绝对定位的参数，代码如下：
html代码：
- <div class=“main”></div>
- <div class=“sub”>
- <div class=“sub01”></div>
- <div class=“sub01”></div>
- <div class=“fixed”>我是固定的哟</div>
- </div>
[demo]http://pan.baidu.com/s/1gdO4F8v[/demo]
jQuery代码：
- $(document).ready(function(e) {
- t = $(‘.fixed’).offset().top;
- mh = $(‘.main’).height();
- fh = $(‘.fixed’).height();
- $(window).scroll(function(e){
- s = $(document).scrollTop();
- if(s > t – 10){
- $(‘.fixed’).css(‘position’,’fixed’);
- if(s + fh > mh){
- $(‘.fixed’).css(‘top’,mh-s-fh+’px’);
- }
- }else{
- $(‘.fixed’).css(‘position’,”);
- }
- })
- });
css代码：
- <style type=“text/css”>
- *{padding:0px;margin:0px;}
- .box{width:1000px;background:#ccc;margin:0 auto;overflow:hidden;}
- .main{width:770px;height:3000px;background:#000;float:left;}
- .sub{width:220px;background:#FC6;float:rightright;}
- .sub01{width:220px;height:100px;background:#0CC;margin-bottom:10px;}
- .fixed{width:220px;height:300px;background:#F66;font:normal 13px/30px \5FAE\8F6F\96C5\9ED1;text-align:center;top:10px;}
- </style>
教程已完结是不是非常简洁，以前需要几K的代码，现在一小段就搞定了，我博客侧边也是用的这一段，无错运行，性能不错！
等待 持续关注着1