css定位 position:sticky
定位有各种各样的类型,我们来看看这个sticky ( 尽管兼容性有些问题,但是却很好用 );
先来演示一下:
<!doctype html>
< html>
< head>
< meta charset= “utf-8” >
< title >position </ title >
< style type = “text/css” >
* {
margin : 0 ;
padding : 0 ;
}
.space {
width : 100 % ;
height : 150 px ;
background-color :orange;
}
.test {
width : 100 % ;
height : 200 px ;
background : #000 ;
position :-webkit-sticky;
position :sticky;
top : 0 px ;
}
< / style >
</ head>
< body>
< div class= “space” >橘黄色区域 </ div >
< div class= “test” >sticky部分 </ div >
< br >< br >< br >< br >< br >< br >< br >< br >< br >< br >< br >< br >< br >< br >< br >< br >
< br >< br >< br >< br >< br >< br >< br >< br >< br >< br >< br >< br >< br >< br >< br >< br >
</ body>
</ html>
直接看效果就行了,重点在于top值,top值为零,那么到顶部就固定了,
如果top值为10px,那么离顶部还有10px 的地方就会固定,这就是sticky;
如果不用这个,我们还需要监听然后处理,还是挺麻烦的;
(使用原生js实现,我们利用:var temp = document.documentElement.scrollTop
即可获取滚动的距离大小)
sticky虽然好用,但是要注意兼容性啊!
还没有评论,来说两句吧...