WEB移动端粘黏吸顶效果的解决方案

Cobub 发布于2019-08-30 15:53 / 1879人阅读

摘要：原文链接一般的吸顶，通常是给上一个定位便可实现，而类似于上图这样的粘黏吸顶，也是一个比较常见的需求粘黏吸顶大概的思路是这样首先，给吸顶栏一个或者定位，通过去监听事件触发一个判断吸顶栏高度的函数，当吸顶栏的高度距离可视区域顶部小于等于时，将其

原文链接: Fyerl"s Blog

一般的header吸顶，通常是给上一个fixed定位便可实现，而类似于上图这样的“粘黏吸顶”，也是一个比较常见的需求

“粘黏吸顶”大概的思路是这样：首先，给吸顶栏一个absolute或者relative定位，通过js去监听scroll事件触发一个判断吸顶栏高度的函数，当吸顶栏的高度距离可视区域顶部小于等于0时，将其定位方式替换成fixed，大于0时再替换回absolute或者relative

以上的思路在PC端和安卓端均是可行的，但在iOS上，判断高度的函数却并不会随着scroll事件每次都触发，而是在滑动停止后才去触发这个函数

google一下“iOS onscroll event delay”得知，这是iOS8作出的改变，在web页面滚动时，不触发和执行js
http://developer.telerik.com/...

这里我只是需要实现一个吸顶效果，不涉及其他逻辑代码，如果一定要通过scroll触发的话，只能使用iSroll等其他第三方库来取代iOS的原生滚动

回到吸顶问题，为了一个效果引入一个第三方库的成本有点大，于是又寻找了一下，发现了一个知道但是没有重视过的position属性sticky，顾名思义，这个属性的作用就是粘黏，理论上是不需要通过js就能实现“粘黏吸顶”的，但是这个属性在PC端以及安卓移动端的表现不尽人意，兼容性还是差了点，然而，在iOS端的表现却非常出色，iOS6.1以上的系统均支持

所以最后的解决方案就是：
首先判断当前系统，如果是Android，就通过常规的监听scroll事件并使用fixed定位；iOS便使用sticky定位

//Android
.tab-box-fixed {
  position: fixed;
  z-index: 5;
}
//iOS
.tab-box-sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  left: 0;
  z-index: 5;
}

idc机房托管专线服务粘黏吸顶 js 移动端效果图时吸顶移动web

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/116533.html

WEB移动端粘黏吸顶效果的解决方案

摘要：原文链接一般的吸顶，通常是给上一个定位便可实现，而类似于上图这样的粘黏吸顶，也是一个比较常见的需求粘黏吸顶大概的思路是这样首先，给吸顶栏一个或者定位，通过去监听事件触发一个判断吸顶栏高度的函数，当吸顶栏的高度距离可视区域顶部小于等于时，将其原文链接: Fyerls Blog showImg(https://segmentfault.com/img/bVJMAs?w=360&h=240...

macg0406 2019-08-20 14:35 评论0 收藏0
WEB移动端粘黏吸顶效果的解决方案

摘要：原文链接一般的吸顶，通常是给上一个定位便可实现，而类似于上图这样的粘黏吸顶，也是一个比较常见的需求粘黏吸顶大概的思路是这样首先，给吸顶栏一个或者定位，通过去监听事件触发一个判断吸顶栏高度的函数，当吸顶栏的高度距离可视区域顶部小于等于时，将其原文链接: Fyerls Blog showImg(https://segmentfault.com/img/bVJMAs?w=360&h=240...

forsigner 2019-08-05 10:51 评论0 收藏0
WEB移动端粘黏吸顶效果的解决方案

摘要：原文链接一般的吸顶，通常是给上一个定位便可实现，而类似于上图这样的粘黏吸顶，也是一个比较常见的需求粘黏吸顶大概的思路是这样首先，给吸顶栏一个或者定位，通过去监听事件触发一个判断吸顶栏高度的函数，当吸顶栏的高度距离可视区域顶部小于等于时，将其原文链接: Fyerls Blog showImg(https://segmentfault.com/img/bVJMAs?w=360&h=240...

figofuture 2019-08-01 16:23 评论0 收藏0
Vue开发——实现吸顶效果

摘要：因为项目需求，最近开始转到微信公众号开发，接触到了框架，这个效果的实现虽说是基于框架下实现的，但是同样也可以借鉴到其他地方，原理都是一样的。上面我们得到了一个的属性值，接下来我们只需要根据它的值来设置吸顶元素的属性就可以了。因为项目需求，最近开始转到微信公众号开发，接触到了Vue框架，这个效果的实现虽说是基于Vue框架下实现的，但是同样也可以借鉴到其他地方，原理都是一样的。进入正题...

amuqiao 2019-08-26 10:22 评论0 收藏0
Vue开发——实现吸顶效果

摘要：因为项目需求，最近开始转到微信公众号开发，接触到了框架，这个效果的实现虽说是基于框架下实现的，但是同样也可以借鉴到其他地方，原理都是一样的。上面我们得到了一个的属性值，接下来我们只需要根据它的值来设置吸顶元素的属性就可以了。因为项目需求，最近开始转到微信公众号开发，接触到了Vue框架，这个效果的实现虽说是基于Vue框架下实现的，但是同样也可以借鉴到其他地方，原理都是一样的。进入正题...

Yangder 2019-08-05 17:43 评论0 收藏0