css定位 position：sticky

￡神魔★判官ぃ 2022-05-28 04:37 256阅读 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 条评论，256人围观）

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

相关阅读

相关 css 定位

一、position <table> <thead> <tr> <th>值</th> <th>说明</th> <th>是否使其脱离文本流

淡淡的烟草味﹌/ 2022年11月21日 06:55/ 0 赞/ 208 阅读

相关 CSS定位

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

忘是亡心i/ 2022年09月15日 15:56/ 0 赞/ 226 阅读

相关 CSS定位

[参考文章][Link 1] 文章中含有多个例子，试试就能明白。例子： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML

Myth丶恋晨/ 2022年08月22日 15:13/ 0 赞/ 59 阅读

相关 css定位

<table style="margin:15px 0px 0px; padding:0px; border-color:rgb(170,170,170); width:809

今天药忘吃喽~/ 2022年06月01日 06:45/ 0 赞/ 287 阅读

相关 css_定位

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

短命女/ 2022年05月25日 05:06/ 0 赞/ 274 阅读

相关 CSS定位

div\{ width:200px; height:300px \} 固定定位：页面的某一位置不动相对定位：相对于父级块标签，肉体还在，灵魂出窍绝

本是古典何须时尚/ 2022年04月10日 04:00/ 0 赞/ 278 阅读

相关【CSS】 CSS 定位

css 定位和浮动　　\\\\\\\本章大量内容copy自w3school\\\\\\\\\ 　　定位对于html界面还是很重要的，因为定位会直接影响到用户的视图。对于c

╰+攻爆jí腚メ/ 2022年03月30日 10:55/ 0 赞/ 347 阅读

相关 CSS（定位）

position属性 static：默认值，没有定位标准文档流 relative：相对定位 absolute：绝对定位 fixed：固定定位文章目

待我称王封你为后i/ 2021年11月17日 23:04/ 0 赞/ 386 阅读

相关 CSS 定位

在css中，如果你要确定一个元素的位置，那么就需要用到定位的属性了，属性名：position。在css中，定位的方式有：static、fixed、relative、abso

阳光穿透心脏的1/2处/ 2021年09月14日 02:04/ 0 赞/ 408 阅读

相关 css 定位

static: static默认值,没有定位,元素出现在正常的流中； relative: 相对原位置移动,其他标签元素

阳光穿透心脏的1/2处/ 2021年07月24日 14:23/ 0 赞/ 477 阅读