微信小程序导航栏或菜单栏吸顶效果简单实现
思路:
1、获取导航栏初始位置距顶部的距离s1(通过获取页面标签方法)
2、监听页面的滑动,获取滑动距离s2(使用onPageScroll)
3、当s2>=s1时,给导航栏增加固定的样式(position:fixed)
代码:
1、导航栏
2、固定到顶部的样式
.fixed {position: fixed;top: 0;z-index: 1;}
3、获取导航栏初始位置距顶部的距离
var _this = this;var query = wx.createSelectorQuery()query.select('#affix').boundingClientRect();query.selectViewport().scrollOffset();query.exec(function(res) {_this.setData({menuTop: res[0].top})})
4、监听页面的滑动,获取滑动距离,比较并设置样式
// 监听页面滚动距离onPageScroll: function(e) {if (this.data.menuFixed === (e.scrollTop > this.data.menuTop)) return;// 当页面滚动距离scrollTop > menuTop菜单栏距离顶部的距离时,菜单栏固定定位this.setData({menuFixed: (e.scrollTop > this.data.menuTop)})},
最后效果:
如果觉得《微信小程序导航栏或菜单栏吸顶效果简单实现》对你有帮助,请点赞、收藏,并留下你的观点哦!