微信小程序，滑动页面到指定位置，固定元素在顶部

平常开发中可能会用到，当页面滑动到某一个位置时，需要固定导航栏或者某个元素在顶部位置，向上滑动又会回归原位，方法特别好实现，在小程序自带的方法

onPageScroll中可以得到滑动距离顶部的距离，在data公共数据中定义scrollTop,代码如下

onPageScroll: function (t) {

var a = this;

// console.log(t.scrollTop)

a.setData({

scrollTop:t.scrollTop

})

}得到滑动距离后，当页面滑动超出需要固定元素距离顶部的距离后使用css样式控制其定位，我写的是一个可以左右滑动的导航栏，因此为要在scroll-view中定义

class="{{scrollTop>758 ? 'rel' : 'nav'}}"，758就是我需要定义的模块距离顶部的距离，当超过这个距离就会执行css的rel样式

position: fixed;

top:52px;

z-index:999;否则就执行愿有的css样式，  我此处需要注意的问题是top属性要定义px的距离单位，如果使用百分比会产生屏幕尺寸问题，

这种写法我这边在开发者工具中显示有些卡顿，真机上还好，日后再改进吧 

 

 

自己记录开发中的小问题，欢迎大家指正

转载于:https://www.cnblogs.com/lishuang2243/p/10998432.html