最近在写一个小程序，项目中遇到一个需求：页面滚动到tab切换菜单时，菜单fixed到页面顶部；

实现方法：

使用小程序的onPageScroll事件，滚动到指定位置添加fixed样式；

bug1：获取指定位置错误，因为上面都是图片，在图片未加载出来时获取高度，高度值不对，解决办法就是在imgae上加bindload事件，在图片加载加载完成之后再获取高度；

bug2：onPageScroll事件会有延迟，导致最终效果会出现卡顿，百度之后知道有一个position:sticky，是一个很有意思的属性；

在屏幕范围是该元素的位置不会受到定位的影响，当该元素的位置将要移出偏移的范围时，定位又会变成fixed。根据设置的left top等属性值成固定位置的效果。
sticky属性的特点：

该元素并不脱离文档流，仍然保留元素原来在文档流中的位置；

当元素在容器中被滚动超过指定的偏移值时，元素就会固定到容器的指定位置，也就是说如果元素设置设置top:50px;那么在sticky元素滚动到距离相对定位元素的顶部50px时固定，不再向上移动；

元素固定的相对偏移是相对于离他最近的具有滚动框的祖先元素，如果祖先元素都没有滚动框，那么就是相对于viewport来计算元素的偏移量

tip:需要考虑父元素的高度的情况，sticky元素在到达】父元素的底部时，则不会再发生定位，如果父元素并没有比sticky元素高，那么sticky元素一开始就到达了底部，就不会有定位的效果，当元素滚动到父元素的底部时sticky属性失效

如果父元素的overflow属性不是默认的visible，那么sticky属性不会生效

但是这个属性的兼容性不是很好，可以使用的浏览器只有FireFox和Safari

css3 position:sticky的更多相关文章

  1. CSS3的position:sticky介绍

    用户的屏幕越来越大,而页面太宽的话会不宜阅读,所以绝大部分网站的主体宽度和之前相比没有太大的变化,于是浏览器中就有越来越多的空白区域,所以你可能注意到很多网站开始在滚动的时候让一部分内容保持可见,比如 ...

  2. css3新属性position: sticky 一分钟实现 导航栏悬停功能

    css3新属性position: sticky 一分钟实现 导航栏悬停功能 前言 正文 前言 想必很多前端小伙伴经常会在开发中遇到这样一个需求,就是在下划时,导航栏悬停在屏幕最上方,例如咱们的csdn ...

  3. position:sticky的兼容性尝试

    开篇 笔者刚刚结束淘宝的工作,现在加入了一家有青春活力的垂直电商公司,正对着阿里巴巴的西溪园区,最近一直在熟悉新的工作环境和规范,因此博客有好些时间没有更新了,在此抱歉! 在忙碌完公司的发布系统之后, ...

  4. position:sticky用法

    用户的屏幕越来越大,而页面太宽的话会不宜阅读,所以绝大部分网站的主体宽度和之前相比没有太大的变化,于是浏览器中就有越来越多的空白区域,所以你可能注意到很多网站开始在滚动的时候让一部分内容保持可见,比如 ...

  5. 粘性固定属性 -- position:sticky

    概述 position: sticky,这是一个比较容易忽略的css3 position 新属性,它的作用即为实现粘性布局,它是 relative 与 fixed 的结合. 用法 默认情况下,其表现为 ...

  6. 使用 position:sticky 实现粘性布局

    如果问,CSS 中 position 属性的取值有几个?大部分人的回答是,大概是下面这几个吧? { position: static; position: relative; position: ab ...

  7. position:sticky

    使用sticky定位可以简洁的实现固定功能 例如,左右布局页面,左侧菜单,右侧内容,内容区域滚动时,不希望菜单区域滚动,而是固定不动 以往要实现这个功能,需要使用fixed定位菜单,菜单脱离文档流,布 ...

  8. CSS使用position:sticky 实现粘性布局

    简介 前面写了一篇文章讲解了position常用的几个属性:<CSS 属性之 position讲解>一般都知道下面几个常用的: { position: static; position: ...

  9. position:sticky粘性布局

    新的布局方式,专门用于 tab栏悬浮效果: 当tab栏在可视区域时,正常滚动, tab栏不再可视区域时,悬浮置顶. position:-webkit-sticky; position:sticky; ...

随机推荐

  1. Odoo multiprocessing

    Odoo 在 非 windows 系统下, 支持 并行处理,开启 workers 配置项 即可.     odoo有以下配置项 跟 并行处理有关     配置项 帮助信息 解说 limit_memor ...

  2. 分布式数据库数据从属与client与server的数据同步

    老实说,眼下市面上很多产品,的确是不成熟的产品. 用过一些,给人蛋痛的感觉. 导言 分布还是集总 今天我们来探讨一个非常重要的问题. 每一个程序猿都有其思想,我的思想之中的一个,就是分布式. 分布式, ...

  3. C语言-回溯例1

    回溯法解N皇后问题 1,代码分析: 使用一个一维数组表示皇后的位置 其中数组的下标表示皇后所在的行 数组元素的值表示皇后所在的列 这样设计的棋盘,所有皇后必定不在同一行 假设前n-1行的皇后已经按照规 ...

  4. AngularJS 实现 双击排序

    关键代码:html <th class="col-md-3"><a href="" ng-click="desc('2',la=!l ...

  5. Appium python自动化测试系列之Capability介绍（五）

    ​5.1 Capability介绍 5.1.1 什么是Capability 在讲capability之前大家是否还记得在讲log时给大家看过的启动时的日志?在我们的整个启动日志中会出现一些配置信息,其 ...

  6. windows下的txt格式转换成linux下的TXT

    存在的问题是 多出一个方框或者黑格子 主要是因为bash 不能忽略windows的问题 用sed 命令来处理,分别是windows转linux,linux转windows sed -e 's/.$// ...

  7. 学习某些API的方法

    学习某些 API 的方法 这里的 API 可能是某个系统平台,开发包,开发平台,开发工具等等,因为任何系统和技术方法提供给开发者的打包方式都是一系列 API . 无论你有在哪一层级开发,从硬件驱动到系 ...

  8. EasyDarwin开源流媒体项目

    本文转自EasyDarwin CSDN官方博客:http://blog.csdn.net/easydarwin EasyDarwin是由国内开源流媒体团队维护和迭代的一整套开源流媒体视频平台框架,从2 ...

  9. HDFS HBase Solr Which one?

    从访问模式角度决策 HDFS 压缩性能最优.扫描速度最快:不支持随机访问,仅支持昂贵.复杂的文件查询 HBase适合随机访问 Solr 适合检索需求 HBase访问单个记录的时间为毫秒级别,而HDFS ...

  10. hdu1427 速算24点

    </pre><pre> //#pragma comment(linker, "/STACK:102400000,102400000") //HEAD #in ...