微信小程序--特定区域滚动到顶部时固定的方法


Posted in Javascript onApril 28, 2019

项目要求:

微信小程序--特定区域滚动到顶部时固定的方法

如图所示,当页面滚动到导航条到达搜索栏下方时固定,向上滚动到导航条位置时又恢复原样。
以下是代码展示:

 1.wxml

<scroll-view style="width:100%;height: 100%;" scroll-y="true" bindscroll="scrollTopFun">
  <view class="{{top>130 ? 'topnav' : ''}}">
  <--这里写大于130,表示距离顶部130rpx时固定,可根据需要修改-->
    ...
  </view>
</scroll-view>

2.wxss

.topnav{
  position: fixed;
  top: 85rpx;
  z-index:99;
  background: #fff;
  width: 100%;
}

3.js

data = {
 top:0
}
//控制回到顶部按钮的显示与消失
scrollTopFun(e){
  let that = this;
  that.top = e.detail.scrollTop;
  that.$apply();
}

其实整个思路很简单, 小程序自带的组件scroll-view自带有属性bindscroll(滚动时触发)。通过这个属性获取浏览器滚动条距离顶部的位置,通过这个位置判断class类的显示就可以了。

以上所述是小编给大家介绍的微信小程序--特定区域滚动到顶部时固定的方法详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript实现禁止后退的方法
Dec 27 Javascript
javascript 流畅动画实现原理
Sep 08 Javascript
JS的get和set使用示例
Feb 20 Javascript
一个不错的字符串转码解码函数(自写)
Jul 31 Javascript
JS基于面向对象实现的拖拽库实例
Sep 24 Javascript
React.js入门实例教程之创建hello world 的5种方式
May 11 Javascript
VUEJS实战之修复错误并且美化时间(2)
Jun 13 Javascript
兼容浏览器的js事件绑定函数(详解)
May 09 Javascript
微信小程序自定义导航隐藏和显示功能
Jun 13 Javascript
element 结合vue 在表单验证时有值却提示错误的解决办法
Jan 22 Javascript
详解使用element-ui table组件的筛选功能的一个小坑
Nov 02 Javascript
在vue项目中使用Jquery-contextmenu插件的步骤讲解
Jan 27 jQuery
详解vue更改头像功能实现
Apr 28 #Javascript
Vue2(三)实现子菜单展开收缩,带动画效果实现方法
Apr 28 #Javascript
js+html5 canvas实现ps钢笔抠图
Apr 28 #Javascript
判断文字超过2行添加展开按钮,未超过则不显示,溢出部分显示省略号
Apr 28 #Javascript
详解微信小程序调用支付接口支付
Apr 28 #Javascript
Vue 中文本内容超出规定行数后展开收起的处理的实现方法
Apr 28 #Javascript
使用webpack编译es6代码的方法步骤
Apr 28 #Javascript
You might like
php 保留小数点
2009/04/21 PHP
用PHP实现的四则运算表达式计算实现代码
2011/08/02 PHP
在PHP中设置、使用、删除Cookie的解决方法
2013/05/06 PHP
PHP多线程批量采集下载美女图片的实现代码(续)
2013/06/03 PHP
响应鼠标变换表格背景或者颜色的代码
2009/03/30 Javascript
JavaScript 构造函数 面相对象学习必备知识
2010/06/09 Javascript
javascript 判断中文字符长度的函数代码
2012/08/27 Javascript
javascript正则表达式定义(语法)总结
2016/01/08 Javascript
javascript入门之string对象【新手必看】
2016/11/22 Javascript
jQuery实现节点的追加、替换、删除、复制功能示例
2017/07/11 jQuery
jquery使用iscorll实现上拉、下拉加载刷新
2017/10/26 jQuery
关于vue v-for循环解决img标签的src动态绑定问题
2018/09/18 Javascript
JS异步错误捕获的一些事小结
2019/04/26 Javascript
layui实现数据表格点击搜索功能
2020/03/26 Javascript
[40:03]Liquid vs Optic 2018国际邀请赛淘汰赛BO3 第一场 8.21
2018/08/22 DOTA
python实现代理服务功能实例
2013/11/15 Python
解读Django框架中的低层次缓存API
2015/07/24 Python
利用Python脚本生成sitemap.xml的实现方法
2017/01/31 Python
Mac中升级Python2.7到Python3.5步骤详解
2017/04/27 Python
python使用pygame框架实现推箱子游戏
2018/11/20 Python
对pytorch中的梯度更新方法详解
2019/08/20 Python
tensorflow的计算图总结
2020/01/12 Python
python中使用input()函数获取用户输入值方式
2020/05/03 Python
python实现在线翻译
2020/06/18 Python
Python接收手机短信的代码整理
2020/08/02 Python
CSS3 渐变(Gradients)之CSS3 径向渐变
2016/07/08 HTML / CSS
css3利用transform变形结合事件完成扇形导航
2020/10/26 HTML / CSS
html5指南-6.如何创建离线web应用程序实现离线访问
2013/01/07 HTML / CSS
巴基斯坦电子产品购物网站:Home Shopping
2017/09/14 全球购物
介绍一下如何利用路径遍历进行攻击及如何防范
2014/01/19 面试题
工作迟到检讨书
2014/02/21 职场文书
好的旅游活动方案
2014/08/19 职场文书
反腐倡廉心得体会2016
2016/01/13 职场文书
Python基本数据类型之字符串str
2021/07/21 Python
Java无向树分析 实现最小高度树
2022/04/09 Javascript
Python可视化动图组件ipyvizzu绘制惊艳的可视化动图
2022/04/21 Python