最近在写一个小程序,项目中遇到一个需求:页面滚动到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. icmp的程序(ping的实现)

    code来源于<网络编程与分层协议设计> chap7 ICMP协议程序设计 ----没有理解,没有编译,只是敲了出来 ping.h #define ICMP_ECHOREPLY 0#def ...

  2. Python生成8位随机字符串的一些方法

    #第一种方法 import random import string seed = "1234567890abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOP ...

  3. 汇率换算自然语言理解功能JAVA DEMO

    >>>>>>>>>>>>>>>>>>>>>>>> 欢迎转 ...

  4. VS + Qt5Designer + Anaconda环境配置

    最近打算做一个模型训练工具,从来都不喜欢做UI的我,最终把目光放在了QtDesigner上.配环境的过程中在网上翻阅了不少博客,但大多是pycharm或者是VScode,使用VS的似乎不多.所以打算记 ...

  5. Spring与JDK版本不一致引发问题Caused by: java.lang.IllegalArgumentException

    tomcat启动一个spring的项目,tomcat使用8.5,JDK使用1.8,Spring使用3.0,启动之后报错 Caused by: java.lang.IllegalArgumentExce ...

  6. MAC如何查看某个端口的占用情况

    执行如下命令: lsof -i tcp:8080 #8080为查询的端口号 会展示该端口的使用情况,然后kill -9 PID的值即可关闭该端口

  7. netty+Protobuf (整合一)

    netty+Protobuf 整合实战 疯狂创客圈 死磕Netty 亿级流量架构系列之12 [博客园 总入口 ] 本文说明 本篇是 netty+Protobuf 整合实战的 第一篇,完成一个 基于Ne ...

  8. 预料外的变量值的改变是很多bug的源头

  9. java 内部类(转)

    原文: http://www.cnblogs.com/nerxious/archive/2013/01/24/2875649.html 内部类不是很好理解,但说白了其实也就是一个类中还包含着另外一个类 ...

  10. linux LVM:物理卷逻辑卷

    逻辑卷管理器,当分区不够用的时候,可以新建一个更大的分区再复制进去,但是浪费时间.Lvm可以弹性调整分区大小,可以动态组合分区.分区大小固定了就无法调整, apt-get update & a ...