css定位 position:sticky

£神魔★判官ぃ 2022-05-28 04:37 399阅读 0赞

定位有各种各样的类型,我们来看看这个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虽然好用,但是要注意兼容性啊!

发表评论

表情:
评论列表 (有 0 条评论,399人围观)

还没有评论,来说两句吧...

相关阅读

    相关 CSS定位

    定位的分类 1.静态定位(static) 一般的标签元素不加任何定位属性都属于静态定位,在页面的最底层属于标准流。 2.绝对定位(absoulte) 一般与祖

    相关 css_定位

    1) CSS定位的概念 CSS 定位 (Positioning) 属性允许你对元素进行定位。 它允许你定义元素框相对于其正常位置应该出现的位置,或者相对于父元素、另一个元素