微信小程序和 Vue 实现指定元素吸顶效果

// 监听页面滚动事件
    onPageScroll() {
        let _this = this;
        // 获取需要吸顶的元素距离顶部的高度
        const query = wx.createSelectorQuery();
        // 需要监听的吸顶元素goods-list-box
        query.select('.goods-list-box').boundingClientRect(function (res) {
            if (res.top <= 0) {
                _this.setData({
                    tabFix: 'Fixed'
                })
            } else {
                _this.setData({
                    tabFix: ''
                })
            }
        }).exec();
    },

css 样式

.Fixed{
  position: fixed;
  top: 0;
  margin-top: 0;
  z-index: 99999;
  background: #fff;
  box-shadow: 0 0 10px #ddd;
  margin-left: -16rpx;
}

wxml

<view class="goods-list-box">
        <scroll-view class="menu-item-scroll {{tabFix}} clearfix" scroll-x> </scroll-view>
</view>

Vue 指定元素吸顶效果实现

在 mounted 方法中监听页面滚动

window.addEventListener('scroll', this.windowScroll);

在刚才定义的windowScroll方法中监听元素距离和当前距离，这里我监听的是 goods-list-box 类元素

// 监听页面滚动距离和元素距顶部距离
            windowScroll() {
                let _this = this;
                // 获取元素距离顶部
                let offsetTop = document.querySelector('.goods-list-box').offsetTop;
                let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
                if (scrollTop >= offsetTop) {
                    _this.tabFix = true;
                } else {
                    _this.tabFix = false;
                }
            },

css 样式

.Fixed{
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        margin-top: 0;
        z-index: 9999;
        background: #fff;
        box-shadow: 0 0 10px #ddd;
        overflow-x: auto;
    }

在需要吸顶的元素外边套一个 div（此方法可解决 fixed 定位后无法横向滚动问题）

<div :class="[tabFix ? 'Fixed' :'']">
    <!-- 需要吸顶的导航栏 -->
</div>

当前，提示 tabFix 未定义的话就去 data 中声明一个吧

tabFix: '',