1. 效果图
菜单正常嵌入在页面中
菜单位置滑动到距离可视窗口0px时,脱离文档流固定在页面顶部
2.常见实现方案
- 查询菜单栏距离文档顶部的距离menuTop
- 监听页面滚动距离scrollTop
- 当页面滚动距离scrollTop > menuTop菜单栏距离文档顶部的距离时,菜单栏固定定位
<view class="menu {
{menuFixed ? 'fixed': ''}}
菜单正常嵌入在页面中
菜单位置滑动到距离可视窗口0px时,脱离文档流固定在页面顶部
<view class="menu {
{menuFixed ? 'fixed': ''}}