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 http://efe.baidu.com/blog/mobile-fixed-layout/ , 里面也有许多其他的前端方面的知识.
问题: 当你使用微信, 突然基友发来一个链接, 里面是你夜不能寐的小电影, 你直接点击, 在微信的 X5 浏览器打开了, 滑动筛选, 切换分类, 切换分类, 切换...
为什么点不动其他的分类了, 作为一个前端, 你马上起身, 打开电脑, 复制链接, 打开浏览器, 点击切换, 可以啊, 这时你查看源码┗( ▔, ▔ )┛, 发现:
- #cont {
- position: fixed;
- ...
- }
- var sw = new Swiper('#cont', {})
是的, 微信打开链接, 当页面滚动后, 点击 Swiper 区域点击无反应, 但是当你刷新页面, 直接点击发现又是好的, 我技术还有点水, 不好确定是谁的问题, 粗暴解决:
百度 EFE http://efe.baidu.com/blog/mobile-fixed-layout/
我以后再 iOS 内再也不使用 fixed 我看你还有啥问题, 所以今天在这我要立个 flag๑乛乛๑
来源: http://www.jianshu.com/p/76c6e27089c5