最近在写一个小程序，项目中遇到一个需求：页面滚动到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. vue2.0 + vux （一）Header 组件

    1.main.js import Vue from 'vue' import FastClick from 'fastclick' import VueRouter from 'vue-router' ...

  2. Git经常使用命令

    git --version 版本号号git help 帮助gitk 是个图形化的查看工具.gitk --all 所有分支历史-----------------------git pull 先拉git ...

  3. Effective C++ 条款一 视C++为一个语音联邦

    1.C语言         区块.语句.预处理器.内置数据类型.数组.指针等内容 2.OC++       类.封装.继承.多态.virtual函数 等 3.Template C++       泛型 ...

  4. （利用DOM）在新打开的页面点击关闭当前浏览器窗口

    1.在开发过程中我们前端的用户体验中有时候会要求点击一个按钮,关闭当前浏览器窗口,用HTML DOM就可做到 2.注意:本次写法要求在新窗口中关闭.target="_blank" ...

  5. &lt;LeetCode OJ&gt; 337. House Robber III

    Total Accepted: 1341 Total Submissions: 3744 Difficulty: Medium The thief has found himself a new pl ...

  6. Java依照List内存储的对象的某个字段进行排序

    关键点:将List内存储的对象实现Comparable类.重写它的compareTo()方法就可以 Bean: package chc; public class StuVo implements C ...

  7. PCIE、UART、HDA、I2C、SMBUS、SPI、eSPI、USB、PS2、CAN、SDIO等数据传输协议简介

    M.2 wife一般支持USB.SDIO.PCIE三种传输 1.摄像头 (1)MIPI CSI (2)USB mipi摄像头模组IC简单便宜(小),应为一般把ADC解码在CPU端. MIPI摄像头简介 ...

  8. How to reset your password in Ubuntu

    There are many reasons you might want to reset a password: Someone gave you a computer with Ubuntu i ...

  9. 使用Python处理CSV文件的一些代码示例

    笔记:使用Python处理CSV文件的一些代码示例,来自于<Python数据分析基础>一书,有删改 # 读写CSV文件,不使用CSV模块,仅使用基础Python # 20181110 wa ...

  10. html的dtd声明

    其实DOCTYPE声明,因为很多时候团队里没有做规范应该用哪个,而且几种不同的编辑工具新建出的html页面标准也不同:这就可能一个jsp页面写了几百行甚至上千行了,然后发现某个样式必须要改DOCTYP ...