uni-app nvue页面，使用自定义navBar加元素设置position: sticky时，top设置任意值元素也会滚动到顶部

在 uni-app 的 nvue 页面中，使用 position: sticky 时，元素可能会滚动到顶部，即使你设置了 top 值。这是因为 nvue 的渲染机制与 webview 不同，nvue 是基于原生渲染的，因此某些 CSS 属性的行为可能与传统的 Web 行为不一致。

解决方案

1. 使用 position: fixed 替代 sticky: 如果你希望元素在页面滚动时固定在某个位置，可以考虑使用 position: fixed。你可以通过监听页面滚动事件来动态调整 top 值，以达到类似 sticky 的效果。

   <template>
     <view class="container">
       <view class="nav-bar" :style="navBarStyle">
         <!-- 导航栏内容 -->
       </view>
       <scroll-view @scroll="handleScroll">
         <!-- 页面内容 -->
       </scroll-view>
     </view>
   </template>
   
   <script>
   export default {
     data() {
       return {
         scrollTop: 0,
         navBarHeight: 50 // 导航栏高度
       };
     },
     computed: {
       navBarStyle() {
         return {
           position: 'fixed',
           top: this.scrollTop > this.navBarHeight ? 0 : `${this.navBarHeight - this.scrollTop}px`,
           width: '100%',
           backgroundColor: '#fff',
           zIndex: 1000
         };
       }
     },
     methods: {
       handleScroll(event) {
         this.scrollTop = event.detail.scrollTop;
       }
     }
   };
   </script>
   

2. 使用 uni-sticky 组件: uni-app 提供了一个 uni-sticky 组件，可以用于实现类似 sticky 的效果。你可以尝试使用这个组件来替代原生的 position: sticky。

   <template>
     <view class="container">
       <uni-sticky>
         <view class="nav-bar">
           <!-- 导航栏内容 -->
         </view>
       </uni-sticky>
       <scroll-view>
         <!-- 页面内容 -->
       </scroll-view>
     </view>
   </template>
   

3. 手动计算滚动位置: 如果你需要更精确的控制，可以手动计算滚动位置，然后动态调整元素的位置。

   <template>
     <view class="container">
       <view class="nav-bar" :style="navBarStyle">
         <!-- 导航栏内容 -->
       </view>
       <scroll-view @scroll="handleScroll">
         <!-- 页面内容 -->
       </scroll-view>
     </view>
   </template>
   
   <script>
   export default {
     data() {
       return {
         scrollTop: 0,
         navBarHeight: 50 // 导航栏高度
       };
     },
     computed: {
       navBarStyle() {
         return {
           position: 'absolute',
           top: this.scrollTop > this.navBarHeight ? 0 : `${this.navBarHeight - this.scrollTop}px`,
           width: '100%',
           backgroundColor: '#fff',
           zIndex: 1000
         };
       }
     },
     methods: {
       handleScroll(event) {
         this.scrollTop = event.detail.scrollTop;
       }
     }
   };
   </script>