我用的mpvue框架写的项目

目的是菜单滑动到顶部 让菜单吸顶  反之下拉超过菜单正常显示，功能实现了但是滑动效果不好 会有延显示迟现象，效果不好，看了网上介绍这种问题很多 但没有明确给出解决方法的

我的代码实现是这样的：

//根据滑动距离和菜单的距离做判断 来实现组件的样式判断

onPageScroll: function(e) {

  let that = this;

  if (e.scrollTop >= this.fixTop && e.scrollTop > that.scrollTop) {

    this.fixToTop = true;

  } else {

    this.fixToTop = false;

  }

  that.scrollTop = e.scrollTop;

    console.log("onpage:", e.scrollTop, this.fixTop, this.fixToTop);

},

//拿到组件菜单id

mounted() {

let that = this;

wx

.createSelectorQuery()

.select("#mjltest")

.fields(

{

dataset: true,

size: true,

scrollOffset: true,

rect: true,

properties: ["scrollX", "scrollY"]

},

function(res) {

that.fixTop = res && res.top + 30;

}

)

.exec();

},

//html部分

<div id="mjltest" :class="['productClassify',{'fixToTopStyle':fixToTop}]">

</div>