vue 滑动置顶功能_CSS3 移动端滚动置顶吸顶

如果是在回调里置顶DIV的话(比如点击事件)，可以用scrollIntoView。

CSS3滚动置顶目前有两种解决方案：

第一种(主流)：transform: translate3d(x,y,z)

第二种(未来)：position: sticky;top:xxx;

假设需求：

image.png

需求一：滚动过程中A ,C区域不吸顶，B区域吸顶

VUE框架推荐直接使用vantUI插件,indexbar索引栏。

https://youzan.github.io/vant/#/zh-CN/index-bar

vantUI原理用的是transform。

以上面图片为例大致讲解：

1.transform对JS的能力要求高些，页面加载完毕后，给每个B区域对应的DIV设置translate3d的Y轴值，值为B对应div离顶部的高度。

2.当开始滚动起来后，Y轴值为原来值减去滚动条滚动距离值

3.当Y轴值小于0的时候，锁死为0，就自动吸顶了

4.当待置顶DIV的translate3d Y轴值小于DIV的高度时，已置顶DIV的Y轴值开始变为负数，这样会有一个顶出的效果

5.已置顶DIV被待置顶DIV顶出一定距离(一般两倍DIV高度)，取消translate3d属性，

6.回滚反向计算即可

需求二：滚动过程中 C不吸顶，B吸顶，A一直吸顶 B在A下面

这个需求vantUI(v2.9.3)目前解决不了,采用translate太复杂，决定采用CSS3新属性position: sticky。

如果是2018年使用该属性兼容性还是个问题，但来到2020年下半年，对大部分生产环境都不是问题。博主测试的IOS11和安卓小米华为都支持该属性。

image.png

https://www.caniuse.com/#search=sticky

博主的建议是：如果是公司APP内嵌H5页面可以使用该属性，如果纯H5页面比如微信打开，建议translate.

position: sticky;字面意思就是粘性定位。

可以粘顶部也可以粘底部右侧左侧。

所以除了position: sticky;还要给一个定位值，比如top:0px或者right:0px就可以了非常简单。

比如直接给Bdiv设置下面样式就行

image.png

实际使用要注意下面几点：

1.如果想兼容IOS12 IOS11 必须带position: -webkit-sticky;而且要在样式表里写，不能写在style里。

2.容器相关。只有要移除容器范畴才起作用。比如body的height不要设置100%，height：100%表示所有元素一直在屏幕范围

vue 滑动置顶功能_CSS3 移动端滚动置顶吸顶相关推荐

tab吸顶功能实现，css实现沾性吸顶，sticky实现吸顶，解决sticky吸顶失效
吸顶效果 1.结构部分 <view class="tab_box"><view:class="{ active: curIndex === index ...
小程序 WXS响应事件（滚动菜单栏tab吸顶）
小程序 WXS响应事件(滚动菜单栏tab吸顶) 解决问题: 小程序页面滚动,tab触顶吸顶解决办法: 1)页面滚动事件中监听处理(不推荐) 缺点:在安卓端性能非常差,吸顶效果反应迟钝,不流畅等问题. ...
使用 better-scroll 实现纵向横向双向滚动并设置吸顶
使用 better-scroll 实现纵向横向双向滚动需要达到的效果:右侧内容左右滚动时,左侧边栏不动,上下滑动时整体内容上下滚动如图: 1.纵向滚动安装并引入 import BScroll f ...
php置顶功能代码,jquery实现页面置顶功能代码
//获取页面的最小高度,无传入值则默认为600像素 min_height ? min_height = min_height : min_height = 600; //为窗口的scroll事件绑定处 ...
Vue导航栏吸顶及滚动渐变色
@阿乐今天敲代码没效果图好几天没更新了,做一个小demo吧.导航栏吸顶,以及随页面滚动实现渐变色吸顶前: 吸顶后: 滚动渐变色: 一.实现 html: <div class="n ...
web实现置顶、置底功能、聊天页面、锚点、滚动条、vue、scrollTop、scrollIntoView、scrollHeight
目录前言 1.代码实现 3.scrollTop实现置顶置底(方式一) 4.scrollIntoView实现置顶置底(方式二) 5.总结前言在项目中遇到聊天功能,功能涉及置顶和置底知识,由此记录一 ...
vue列表项吸顶 js+css两种骚操作
demo需求:vue项目中,在列表里,滑动到哪个日期的时候,哪个日期就吸顶显示: js方法: 用js的方法思路:获取每一项item的底部距离顶部的高度,把所有的高度放在一个数组里面,在去循环比对,在使 ...
vue中怎么实现吸顶效果
在 web 应用中,我们经常需要让页面中的一个或多个元素在页面滚动时保持固定位置.这种效果通常被称为吸顶效果,因为它使元素像粘在页面顶部一样固定不动. 在 Vue 中,实现吸顶效果有不同的方法.本文将 ...
微信小程序导航头部吸顶效果
功能描述:当页面滚动到该元素的时候,变成固定的导航头部,也就是固定在最上面,当往回滑动时又变成原来的样子. 基本原理是: 1.获取要吸顶元素到页面顶部的高度 2.监听页面已经滚动的高度 3.将要吸顶元 ...
uniApp sticky 吸顶兼容小程序 h5
使用uView的 sticky 完成在h5端的吸顶效果页面滚动到一定距离后元素吸顶 h5吸顶距离为44px. 但是在小程序时默认的吸顶距离是0px因为我的小程序头部导航栏的高度不固定所以这里需要 ...

vue 滑动置顶功能_CSS3 移动端滚动置顶吸顶

vue 滑动置顶功能_CSS3 移动端滚动置顶吸顶相关推荐

最新文章

热门文章

vue 滑动置顶功能_CSS3 移动端 滚动置顶 吸顶

vue 滑动置顶功能_CSS3 移动端 滚动置顶 吸顶相关推荐

最新文章

热门文章

vue 滑动置顶功能_CSS3 移动端滚动置顶吸顶

vue 滑动置顶功能_CSS3 移动端滚动置顶吸顶相关推荐