1、新建html文档。
2、书写hmtl代码<div class="box"> <!--代码开始--><div class="main"></div><div class="sub"><div class="sub01"></div><div class="sub01"></div><div class="fixed">我是固定的哟</div></div><!--代码结束--></div>。
3、书写css代码。<style type="text/css">**{padding:0pxmargin:0px}.box{width:1000px
background:#cccmargin:0 autooverflow:hidden}.main{width:770pxheight:3000px。
background:#000float:left}.sub{width:220pxbackground:#FC6float:right}.。
4、sub01{width:220pxheight:100pxbackground:#0CCmargin-bottom:10px}.fixed
{width:220pxheight:300pxbackground:#F66font:normal 13px/30px \5FAE\8F6F\96C5\
9ED1text-align:centertop:10px}</style>。
5、书写并添加js代码。<script src="js/jquery.js"></script>。这就完成了。
判断一下浏览器滚动高度和要固定在顶部的那个元素距离文档顶部的距离，然后监听滚动事件，获取滚动的高度，判断滚动高度和获取到的元素距顶部距离，如果相等的时候，让元素固定定位。这样就好了。写代码太繁琐，原理是这样，你自己试试。
另外，避免出现元素固定定位时，因为突然固定，不占高度导致的页面会跳动一下的问题。可以在固定定位的同时，给后边的元素加上等同于固定定位元素高度的margin-top或者padding-top
另外。再多说一句。个人感觉。网站特效，就是用js控制css，从而得到一些单纯用css写不能实现的效果。所以，遇到类似的效果，可以自己尝试想一下思路，把思路写出来，然后再根据思路，找到自己需要了解的知识点，然后慢慢的效果就出来了
