?? 个人主页 极客小俊
??? 作者简介:web开发者、设计师、技术分享博主
?? 希望大家多多支持一下, 我们一起学习和进步!??
?? 如果文章对你有帮助的话,欢迎评论 ??点赞???? 收藏 ??加关注
概述
我们以前在
那么什么叫粘性定位呢,它又有什么用处呢?
不用着急 哈哈哈 我们先来看一个案例你就明白了!
从上图案例中我们可以看到
虽然这个吸附粘性效果我们是可以通过
所以我们的
粘性定位的定义
首先既然是
简单点说我们给一个元素设置的
案例
我们来看一个案例,假设我们随便来一点文字信息,把它们装到一个容器里面,
然后里面再添加一个
<style type="text/css"> #info{ width: 100px; height: 30px; line-height: 30px; color: white; background-color: green; border: 2px solid black; padding: 5px; margin: 100px auto; font-weight: bold; text-align: center; } .box1 { width: 500px; height: 700px; background: yellow; margin: 100px auto; overflow-y: scroll; } .box1>.box2{ background-color: blue; width: auto; height: 50px; /*开始进行粘性定位,黏住元素, 在指定的top和left位置 黏住元素*/ position: sticky; top: 50px; left:0px; } </style> <div class="box1" id="box1"> <div class="box2" id="box2"></div> A positioned element is an element whose computed position value is either relative, absolute, fixed, or sticky. (In other words, it's anythi ng except static.) A relatively positioned element is an element whose computed position value is relative. The top and bottom properties specify the vertical offset from its normal position; the left and right properties specify the horizontal offset. An absolutely positioned element is an element whose computed position value is absolute or fixed. The top, right, bottom, and left properti es specify offsets from the edges of the element's containing block. (The containing block is the ancestor relative to which the element is positi oned.) If the element has margins, they are added to the offset. The element establishes a new block formatting context (BFC) for its contents. A stickily positioned element is an element whose computed position value is sticky. It's treated as relatively positioned until its contai ning block crosses a specified threshold (such as setting top to value other than auto) within its flow root (or the container it scrolls within), at which point it is treated as "stuck" until meeting the opposite edge of its containing block. Most of the time, absolutely positioned elements that have height and width set to auto are sized so as to fit their contents. However, n on-replaced, absolutely positioned elements can be made to fill the available vertical space by specifying both top and bottom and leaving height unspecified (that is, auto). They can likewise be made to fill the available horizontal space by specifying both left and right and leaving width as auto. Except for the case just described (of absolutely positioned elements filling the available space): If both top and bottom are specified (technically, not auto), top wins. If both left and right are specified, left wins when direction is ltr (English, horizontal Japanese, etc.) and right wins when direction is rtl (Persian, Arabic, Hebrew, etc.). Accessibility concerns Ensure that elements positioned with an absolute or fixed value do not obscure other content when the page is zoomed to increase text size. MDN Understanding WCAG, Guideline 1.4 explanations Visual Presentation: Understanding SC 1.4.8 | Understanding WCAG 2.0 Performance & Accessibility Scrolling elements containing fixed or sticky content can cause performance and accessibility issues. As a user scrolls, the browser must repaint the st icky or fixed content in a new location. Depending on the content needing to be repainted, the browser performance, and the device's process ing speed, the browser may not be able to manage repaints at 60 fps, causing accessibility concerns for people with sensitivities and jank for everyone. One solution is to add will-change: transform to the positioned elements to render the element in its own layer, improving repaint speed and therefor e improving performance and accessibility. </div>
上图的代码中,我们可以看到,给元素
所以其实意思很简单:给元素一开始开始进行设置
其实这样看,我们还不好看出区别,我们可以把代码修改一下,并且用
<div id="info">没有开始吸附</div> <div class="box1" id="box1"> <div class="box2" id="box2"></div> A positioned element is an element whose computed position value is either relative, absolute, fixed, or sticky. (In other words, it's anythi ng except static.) A relatively positioned element is an element whose computed position value is relative. The top and bottom properties specify the vertical offset from its normal position; the left and right properties specify the horizontal offset. An absolutely positioned element is an element whose computed position value is absolute or fixed. The top, right, bottom, and left properti es specify offsets from the edges of the element's containing block. (The containing block is the ancestor relative to which the element is positi oned.) If the element has margins, they are added to the offset. The element establishes a new block formatting context (BFC) for its contents. A stickily positioned element is an element whose computed position value is sticky. It's treated as relatively positioned until its contai ning block crosses a specified threshold (such as setting top to value other than auto) within its flow root (or the container it scrolls within), at which point it is treated as "stuck" until meeting the opposite edge of its containing block. Most of the time, absolutely positioned elements that have height and width set to auto are sized so as to fit their contents. However, n on-replaced, absolutely positioned elements can be made to fill the available vertical space by specifying both top and bottom and leaving height unspecified (that is, auto). They can likewise be made to fill the available horizontal space by specifying both left and right and leaving width as auto. Except for the case just described (of absolutely positioned elements filling the available space): If both top and bottom are specified (technically, not auto), top wins. If both left and right are specified, left wins when direction is ltr (English, horizontal Japanese, etc.) and right wins when direction is rtl (Persian, Arabic, Hebrew, etc.). Accessibility concerns Ensure that elements positioned with an absolute or fixed value do not obscure other content when the page is zoomed to increase text size. MDN Understanding WCAG, Guideline 1.4 explanations Visual Presentation: Understanding SC 1.4.8 | Understanding WCAG 2.0 Performance & Accessibility Scrolling elements containing fixed or sticky content can cause performance and accessibility issues. As a user scrolls, the browser must repaint the st icky or fixed content in a new location. Depending on the content needing to be repainted, the browser performance, and the device's process ing speed, the browser may not be able to manage repaints at 60 fps, causing accessibility concerns for people with sensitivities and jank for everyone. One solution is to add will-change: transform to the positioned elements to render the element in its own layer, improving repaint speed and therefor e improving performance and accessibility. </div>
<style type="text/css"> #info{ width: 100px; height: 30px; line-height: 30px; color: white; background-color: green; border: 2px solid black; padding: 5px; margin: 100px auto; font-weight: bold; text-align: center; } .box1 { width: 500px; height: 700px; background: yellow; margin: 100px auto; overflow-y: scroll; } .box1>.box2{ background-color: blue; width: auto; height: 50px; /*当它有一定的距离*/ margin-top: 100px; /*开始进行粘性定位,在指定的top和left位置 黏住元素*/ position: sticky; top: 0px; left:0px; } </style>
<script> window.onload=function (){ var info=document.getElementById("info"); var box1=document.getElementById("box1"); var box2=document.getElementById("box2"); box1.onscroll=function (){ console.log(box1.scrollTop); //获取当前元素滚动条到顶部的Top值 if(box1.scrollTop>=100){ box2.style.backgroundColor="red"; info.innerHTML="开始吸附"; info.style.background="red"; }else{ box2.style.backgroundColor="blue"; info.innerHTML="没有开始吸附"; info.style.background="green"; } } } </script>
这里我们加了一个
但是如果你指定了
Sticky与Fixed的区别
很多人搞不清楚这两个之间的区别,其实也很简单
你如果不相信,我们可以来修改一下
.box1>.box2{ background-color: blue; width: 500px; /*给一个宽度*/ height: 50px; /*当它有一定的距离*/ margin-top: 100px; /*开始进行粘性定位,在指定的top和left位置 黏住元素*/ position: fixed; /*设置固定定位*/ top: 0px; left:0px; }
Sticky定位的兼容性
我们里可以使用
从上图看
最后
所以使用这个
大家的支持就是我坚持下去的动力!
如果以上内容有任何错误或者不准确的地方,??????欢迎在下面 ?????? 留个言指出、或者你有更好的想法,
欢迎一起交流学习????????????
更多
点击下方关注??
微信公众号??
说不定有意料之外的收获哦..??嘿嘿嘿、嘻嘻嘻??!
????????????