技术好文:sticky的使用

简介: 技术好文:sticky的使用

"

position: sticky粘性定位:是css新增的一个position属性。说是对于IOS的兼容性好一点,对于安卓的兼容性不太好(我自己感觉安卓的兼容性也不错)

于position:fixed的区别:我们都知道常用的几个定位(static、absolute、relative、fixed),如果没有额外的js处理,只要写上,页面立马就可以看到相对应的效果。而sticky相当于加了一个滚动事件//代码效果参考:https://v.youku.com/v_show/id_XNjQwNjg0MzA3Ng==.html

的处理,当页面滚动到相对应的元素上,就会变成固定定位的效果。当滚动到父元素不在可视区域范围内时,定位效果就会消失。

适用场合:一开始不显示,滚动到一定位置需要显示的元素

使用注意事项:

父元素不能有overflow属性

left、top、right、bottom必须要有一个

仅在父元素内生效,父元素的高度必须大于sticky元素的高度

ios加前缀-webkit-sticky(考虑到兼容问题)

使用方法:

.sticky{

position: sticky;

position: -webkit-sticky;

Width</span>: 100%;

left: 0;

top: 20px;

}

js检查是否支持sticky属性:

var isSupportSticky = function() {

var prefixTestList = 【'', '-webkit-', '-ms-', '-moz-', '-o-'】;

var stickyText = '';

for (var i = 0; i < prefixTestList.length; i++) {

stickyText += 'position:' + prefixTestList【i】 + 'sticky;';

}

// 创建一个dom来检查

var div = document.createElement('div');

div.style.cssText = stickyText;

document.body.appendChild(div);

var isSupport = /sticky/i.test(window.getComputedStyle(div).position);

//代码效果参考:https://v.youku.com/v_show/id_XNjQwMDM5ODU1Ng==.html

document.body.removeChild(div);

div = null;

return isSupport;

};


"
image.png
相关文章
|
27天前
|
开发者 知识图谱
如何参与社区讨论以了解最新的WAI-ARIA技术发展
【6月更文挑战第2天】如何参与社区讨论以了解最新的WAI-ARIA技术发展
11 2
|
1月前
|
安全 Linux Android开发
Android最强保活黑科技的最强技术实现,2024年最新阿里资深Android开发带你搞懂Framework
Android最强保活黑科技的最强技术实现,2024年最新阿里资深Android开发带你搞懂Framework
Android最强保活黑科技的最强技术实现,2024年最新阿里资深Android开发带你搞懂Framework
|
算法 物联网 开发者
平头哥合作伙伴计划即1520计划全解析(三)|学习笔记
快速学习平头哥合作伙伴计划即1520计划全解析(三)
227 0
平头哥合作伙伴计划即1520计划全解析(三)|学习笔记
|
人工智能 搜索推荐 物联网
平头哥合作伙伴计划即1520计划全解析(二)|学习笔记
快速学习平头哥合作伙伴计划即1520计划全解析(二)
109 0
平头哥合作伙伴计划即1520计划全解析(二)|学习笔记
|
供应链 物联网 芯片
平头哥合作伙伴计划即1520计划全解析(一)|学习笔记
快速学习平头哥合作伙伴计划即1520计划全解析(一)
108 0
平头哥合作伙伴计划即1520计划全解析(一)|学习笔记
|
人工智能 搜索推荐 物联网
平头哥合作伙伴计划即1520计划全解析(二)| 学习笔记
快速学习平头哥合作伙伴计划即1520计划全解析。
176 0
平头哥合作伙伴计划即1520计划全解析(二)| 学习笔记
|
物联网 芯片 开发者
平头哥合作伙伴计划即1520计划全解析(一)| 学习笔记
快速学习平头哥合作伙伴计划即1520计划全解析。
92 0
平头哥合作伙伴计划即1520计划全解析(一)| 学习笔记
|
人工智能 算法 物联网
平头哥合作伙伴计划即1520计划全解析(三)| 学习笔记
快速学习平头哥合作伙伴计划即1520计划全解析。
129 0
|
编解码 JavaScript 前端开发
总结项目技术点(前端技术)| 学习笔记
快速学习 总结项目技术点(前端技术)
230 0
|
编解码 移动开发 测试技术