最近在写一个小程序，项目中遇到一个需求：页面滚动到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. swich-----case语句的用法

    转:  http://xinzhi.wenda.so.com/a/1517927252619839

  2. Django-select_related优化查询

    对于一对一字段(OneToOneField)和外键字段(ForeignKey),可以使用select_related 来对QuerySet进行优化. select_related 返回一个QueryS ...

  3. mysql启动warning: World-writable config file

    如果在启动warning: World-writable config file /home/mysql/my.cnf is ignored原因:my.cnf的读取权限进行了设置,不允许World-w ...

  4. 搭建mongoDB 配置副本集 replSet

    mongodb的master_slave和ReplSet是很常见的两种构架: 下面记录下搭建mongodbReplSet 的过程: 首先,进入到一个指定目录下 >cd /opt 下载mongod ...

  5. 02 http协议之方法与状态码

    一:HTTP请求信息和响应信息的格式 请求: ()请求行 ()请求头信息 ()请求主体信息(可以没有) () 头信息结束后和主体信息之间要空一行 请求行又分3部分 请求方法 请求路径 所用的协议 请求 ...

  6. ORACLE 36进制和10进制，互相转换函数

    第一部分 --36转10进制 create or replace function f_36to10 (str varchar) return int  is returnValue int;   s ...

  7. File syncing and sharing software with file encryption and group sharing, emphasis on reliability and high performance.

    http://seafile.com/ showdoc haiwen/seafile: File syncing and sharing software with file encryption a ...

  8. 面向资源操作的http请求

    Guide | Echo - High performance, minimalist Go web framework https://echo.labstack.com/guide e.POST( ...

  9. Factory Pattern

    1.Factory模式两个最重要的功能 (1)定义创建对象的接口,封装了对象的创建. (2)使得具体化类的工作延迟到了子类中. 2.Factory模式结构示意图 3.实现 #ifndef _PRODU ...

  10. win10搭建selendroid测试环境

    官网对于搭建selendroid列出如下要求: 就如 Junit 一样,Selendroid 可以在 Mac,Linux 和 Windows 上使用.Java 主打的就是跨平台. Java SDK ( ...