h5-吸顶效果的实现方法

前言

我们在开发过程中，经常遇到这种需求，搜索框或者菜单，初始位置不在顶部，当我们往上滑动页面的时候，它们会固定到顶部，往下滑动，又回到初始位置。那么这个功能，如果实现呢，下面将进行详细讲解.

效果：

一、通过监听scroll事件，实现吸顶功能

这是大家经常用的一种方法
吸顶效果的基本的开发思路，利用scroll事件进行监听scrollTop的值，当scrollTop达到一定的值得时候设置吸顶元素的position : fixed;属性
实现方法：
写入事件监听，监听滚动条。

mounted () {window.addEventListener('scroll', this.handleScroll);
},
destroyed(){window.removeEventListener('scroll', this.handleScroll);
},
methods: {handleScroll () {  this.$nextTick(() => {let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;  let offsetTop = document.querySelector('#searchBar').offsetTop;if (scrollTop > offsetTop) {this.searchBarFixed = true;} else {this.searchBarFixed = false;}})}
}

css

.isFixed{position:fixed;top:0;left:0;width:100%;z-index:999;
}

在对应的标签中加入修改后的样式

<div id="searchBar" :class="searchBarFixed== true?'isFixed':''">

二、页面内用了vux的scroller组件，第一种方法就失效了，那么怎么做呢

我们在开发列表页的时候，大多数需要上拉刷新和下拉刷新的操作，常用到scroller组件，但是在组件内加菜单栏，进行吸顶，就需要监听scroller组件的滚动事件了

实现思路：
scroller内的组件滑动，是不能固定到顶部的，因为在scroller内的，都属于在滑动范围中，无法脱离这个框架，这时，我们可以在scroller外面加一个同样的菜单，先隐藏，当scroller内的菜单，滑动到达顶部时，隐藏组件内菜单，展示组件外菜单，就达到吸顶的效果了。

html

 <!--菜单-->
<div class="p-tab p-tab-pa" v-show="searchBarFixed"><tab custom-bar-width="110px" bar-active-color="#1196b6" :animate="true"><tab-item v-for="(item,index) in tabList" :selected="item.channelId == channelId || tabIndex==index" active-class="p-tab-selected" @on-item-click="onItemClick" ><img :src="item.channelImg">{{item.channelName}}</tab-item></tab>
</div>
<scroller lock-x scrollbar-y use-pulldown use-pullup ref="scroller" @on-scroll="onScroll" @on-pullup-loading="onScrollUp" @on-pulldown-loading="pullDown" :pulldown-config="pulldown" :pullup-config="pullup">
<!--菜单--><div id="searchBar" class="p-tab" v-show="!searchBarFixed"><tab custom-bar-width="110px" bar-active-color="#1196b6" :animate="true"><tab-item v-for="(item,index) in tabList" :selected="item.channelId == channelId || tabIndex==index" active-class="p-tab-selected" @on-item-click="onItemClick" ><img :src="item.channelImg">{{item.channelName}}</tab-item></tab></div>
<scroller>

onScroll(position){let scrollTop = position.top; //组件滚动时监听的top值this.scrollTop = scrollTop;var offsetTop = document.querySelector('#searchBar').offsetTop; //菜单top值if (scrollTop > offsetTop) { //两个值做比较this.searchBarFixed = true;} else {this.searchBarFixed = false;}}

less

.p-tab-pa{position:absolute;top:0;left:0;width:100%;height:64px;z-index:999;
}
.p-tab{}

h5-吸顶效果的实现方法相关推荐

最贴近京东首页体验的嵌套滑动吸顶效果
吸顶效果是各家 App 或多或少都会用的一个交互,这种交互也常见于 PC.H5,可以说是一种通用性很强的前端交互体验,相比较来说京东首页的嵌套滑动吸顶效果是各个类似效果中体验比较好的一个,因为在嵌套布 ...
30秒实现Vue吸顶效果
酱酱,好久不见鸭! 前言:吸顶效果图: 1.滚动前: image.png 2.滚动中: image.png 3.滚动超过后: image.png 直观效果可参pc端微博左侧的信息栏第一步:html ...
vue音乐项目歌手页面滚动、吸顶效果
总结singer页面: 1.api中去获取 ['热',A-Z] 以及根据['热',A-Z]获取的所有歌手的数据 2.渲染数据 2.1 渲染左边字母title ['热',A-Z] + 该字母开头的歌手 ...
vue中怎么实现吸顶效果
在 web 应用中,我们经常需要让页面中的一个或多个元素在页面滚动时保持固定位置.这种效果通常被称为吸顶效果,因为它使元素像粘在页面顶部一样固定不动. 在 Vue 中,实现吸顶效果有不同的方法.本文将 ...
微信小程序导航栏或菜单栏吸顶效果简单实现
微信小程序导航栏或菜单栏吸顶效果简单实现思路: 1.获取导航栏初始位置距顶部的距离s1(通过获取页面标签方法) 2.监听页面的滑动,获取滑动距离s2(使用onPageScroll) 3.当s2> ...
Android RecyclerView 吸顶效果(一)
实现效果: 实现方案介绍 recyclerView实现吸顶效果有2种方案: 方案1: 通过ItemDecoration 并重写对应的getItemOffsets().onDraw().onDrawOv ...
微信小程序第六篇：元素吸顶效果实现
系列文章传送门: 微信小程序第一篇:自定义组件详解微信小程序第二篇:七种主流通信方法详解微信小程序第三篇:获取页面节点信息微信小程序第四篇:生成图片并保存到手机相册微信小程序第五篇:页面弹出效 ...
自定义tab吸顶效果一
PS:问题:什么是吸顶,吸顶有什么作用,吸顶怎么使用? 在很多app商城中,介绍软件的时候就会使用吸顶效果, 吸顶有很多作用,一个最简单粗暴的作用就是,让用户知道此刻在浏览哪个模块,并可以选择另外的模 ...
微信小程序中实现吸顶效果(流畅、不卡顿)
欢迎访问我的个人博客最开始的时候,在小程序中实现吸顶效果,开发工具看起来还挺好的,但是在真机上就会有问题了. 原因是我不停的去 setData 会导致操作反馈延迟严重,无法及时将操作处理结果及时传 ...
Android - 吸顶效果布局篇
调研了一下微博和豆瓣等大体量的APP,发现内容详情页的评论吸顶效果非常常见. 以截图自豆瓣的效果为例,当上划至内容部分消失时,滑动中的回复条会置顶,并保持在位置不动. 笔者通过实践,记录下目前发现的最 ...

h5-吸顶效果的实现方法

前言

一、通过监听scroll事件，实现吸顶功能

二、页面内用了vux的scroller组件，第一种方法就失效了，那么怎么做呢

h5-吸顶效果的实现方法相关推荐

最新文章

热门文章