癫狂蚊子的痴狂世界

今天接到一个单子,客户要求在屏幕当中网站导航的部分在页面滚动的时候导航部分位置不变,即不随滚动条滚动而滚动,遇到这种情况,相信很多的朋友首先想到的是利用JS来制作,但是,实际上还有更简单的方法,仅仅利用CSS就能实现类似效果.效果如图所示

1.默认情况


2.发生滚动后截图 ,注意左侧位置

要实现这个效果,首先介绍一个CSS属性:position,position可以设定元素的定位方式,其中relative和absolute是常用的两个属性值,而今天效果所用到的是另外一个值:fixed,fixed能够让元素固定在页面中的固定位置,假定我们要固定的元素ID为sgagame,我们首先进行如下设定:


#sgagame {position:fixed;top:8px;}


利用top和left等进行定位,需要注意的是,使用left等的时候,是相对浏览器窗口来说的.设定好之后,测试下,是不是很完美了?当然,前提是你没使用那个万恶的IE6,IE6及以下版本的IE是根本不支持position:fixed属性的,我们需要针对IE6制作特别的版本的CSS,首先用一个div将body里面的内容全部包含,如


body {_overflow:hidden;_width:100%;_height:100%;}
.askgame {_width:100%;_height:100%;_overflow-y:scroll;_overflow-x:auto;}


到此就基本完成了,其中_width是CSS的HACK,详情请在本站(askgame.com.cn)查找,转载请注明来源