Safari浏览器
position: sticky;
position属性中最有意思的就是sticky了，设置了sticky的元素，在屏幕范围（viewport）时该元素的位置并不受到定位影响（设置是top、left等属性无效），当该元素的位置将要移出偏移范围时，定位又会变成fixed，根据设置的left、top等属性成固定位置的效果。
可以知道sticky属性有以下几个特点：
- 该元素并不脱离文档流，仍然保留元素原本在文档流中的位置。
- 当元素在容器中被滚动超过指定的偏移值时，元素在容器内固定在指定位置。亦即如果你设置了top: 50px，那么在sticky元素到达距离相对定位的元素顶部50px的位置时固定，不再向上移动。
- 元素固定的相对偏移是相对于离它最近的具有滚动框的祖先元素，如果祖先元素都不可以滚动，那么是相对于viewport来计算元素的偏移量
- 各浏览器的的兼容性:
-
图片来源 Can I Use
)
-
问题: IOS APP 内 webview , 在 plus 系列的手机滑动页面, sticky定位区域会空白?
解决:
找了一圈没找到问题的原因, 所以在此记录, 并把布局换成的 flex 布局解决...
position: fixed;
- IOS 的 fixed问题已经有了太多的解决方案, 并且现在已经在ios解决, 在此不做具体阐述,具体解决我大部分使用的是百度EFE, 里面也有许多其他的前端方面的知识.
问题: 当你使用微信, 突然基友发来一个链接, 里面是你夜不能寐的小电影, 你直接点击,在微信的X5浏览器打开了, 滑动筛选,切换分类,切换分类,切换...
- 为什么点不动其他的分类了,作为一个前端, 你马上起身, 打开电脑, 复制链接, 打开浏览器,点击切换,可以啊,这时你查看源码┗( ▔, ▔ )┛,发现:
#cont {
position: fixed;
...
}
var sw = new Swiper('#cont', {})
是的,微信打开链接, 当页面滚动后, 点击Swiper区域点击无反应, 但是当你刷新页面,直接点击发现又是好的,我技术还有点水,不好确定是谁的问题,粗暴解决:
-
百度EFE
我以后再IOS内再也不使用fixed我看你还有啥问题, 所以今天在这我要立个flag๑乛◡乛๑
