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

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

1、网页端

APP.vue：

<template>
    <!-- 导航栏 -->
    <Navbar />
    <!-- 中间内容 -->
    <router-view />
    <!-- 底部 -->
    <Footer />
</template>

在Navbar.vue中设置样式：

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

 2、微信小程序

APP.vue：

<template>
  <!-- 导航栏 -->
  <CustomNavBar class="custom_navbar" />
  <scroll-view scroll-y style="height:100%">
    <!-- 轮播图 -->
    <Swiper />
    <!-- 分类面板 -->
    <CategoryPanel />
    <!-- 热门推荐 -->
    <HotRecommend />
  </scroll-view>
</template>

<style scoped lang="scss">
.custom_navbar {
  position: sticky;
  top: 0;
  z-index: 1000;
}
</style>

3、总结

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

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

补充：

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

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

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