微信小程序固定头部不动

微信小程序固定头部不动的步骤如下：

1、在小程序自带的方法onPageScroll中可以得到滑动距离顶部的距离，氏桐在data公共数据中定义scrollTop。

2、得到滑动距离后，当页面滑动超出需要固定元素距离顶部的距离后使用css样式控制其定位，因此为要在scroll-view中定义class="title{{scrollTop>30'topnav'：''}}"30就是我需要定义的模块距离顶部的距离，当超配核蚂过这个距离就会执行css的topnav样培埋式。

3、否则就执行愿有的css样式。

一、自定义导航栏组件

二、设置导航栏固定样式 :

此时，页面主体内容头部会有一部分被导航栏遮住在底下 ，这是因为position定位不占瀑布流空间，历塌为解决这个问题，可以给自定义导航栏加空一唤拦个高度等于导航栏的view，以此给导航栏在页面中占位，且高度等于导航栏高度

topHeight = wx.db.statusBarHeight 和烂胡+ wx.db.navBarHeight

完美解决！！！小程序仿原生自定义导航栏

1、首先打开微信app。

2、其次在微信页面，把页面祥伍下滑到最顶端时，继续按住谨旅或屏幕往下拖动，调出小程序页面。

3、最后小程序页面，上边为近期常用小程序，下部虚框中为要镇如固定的小程序，小程序固定后，就永远不会消失了。

---