新版本的需求要求加入在首页加入一个小功能,用户向下滑动页面时,菜单栏到达顶部时固定不动,其它内容可以继续滚动,最终效果如下(由于当前是测试环境,接口没有更新,页面没有多少数据,重点看效果就行了):

按照以往思路,实现这种效果必须监听滚动条,还要计算页面的高度、状态栏的高度,实现起来还是挺折腾的,而且不同机型可能要进行适配。

于是求助万能的百度,发现一个css属性:position: static,相关链接:https://developer.mozilla.org/zh-CN/docs/Web/CSS/position

大神张鑫旭也针对这个属性写了文章,链接:杀了个回马枪,还是说说position:sticky吧

粘性定位元素(stickily positioned element)是计算后位置属性为 sticky 的元素,看到这个属性,我觉得可以试一试:

CSS部分:

.menu-wrap{
    width: 100%;
    padding: 40rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    background-color: white;
    margin-top: 10rpx;
    position: sticky;  //重点是这个属性
    z-index: 1;
}

HTML部分:

    <!-- menu-wrap -->
    <view class="menu-wrap" style="top: {{statusBarHeight + 90}}rpx;">
        <block wx:for="{{menuList}}" wx:key="index">
            <view class="menu-item" wx:if="{{item.active}}" data-id="{{item.id}}" catchtap="menuTap">
                <image class="menu-thumb" mode="widthFix" src="{{item.img}}"></image>
                <view class="menu-title">{{item.name}}</view>
            </view>
        </block>
    </view>

可见,只需要在css中设置 position: sticky,以及top值即可,由于手机适配原因,我需要动态计算高度,所以将top的值写在HTML内;

执行编译,小程序H5通用,只需两行代码完美实现!