微信小程序和网页端固定导航栏的方式的区别

微信小程序和网页端都可以使用position:sticky，top:0来使导航栏固定在页面顶部，但我发现两者还是有所区别的。

1、网页端

APP.vue：

在Navbar.vue中设置样式：

.navbar {
  position: sticky;
  top: 0;
  z-index: 2500;
}

 2、微信小程序

APP.vue：

3、总结

网页端给导航栏设置sticky定位，不需要写在最外层的元素上；

而小程序一定要加在最外层元素上，否则不生效。

补充：

用position:sticky使导航栏固定在顶部是一个很方便的方式，这种方式只需要对导航栏设置定位，其他元素不需要开启定位。

因为它相当于position:relative和position:fixed的结合，在页面没有滚动时，是相对定位，导航栏不会脱离文档流；当页面滚动之后，就变成固定定位，导航栏脱离文档流，刚好可以覆盖下方的内容。

如果用position:fixed，导航栏是脱离文档流的，所以还需要给导航栏下面的元素加上定位，才不会一开始就覆盖下方的内容区。