scroll-view使用position:sticky不能一直生效

当在scroll-view中使用sticky元素时 为确保其正常响应滚动效果 需要在scroll-view内部添加一个无样式的view元素 作为所有内容的根元素 这样即使sticky元素超出了scroll-view的原始高度 它也能正确地识别与顶部的相对位置 保持其应有的样式和交互效果

<template>  
    <view class="content">  
        <scroll-view scroll-y="true" class="scroll-view">  
            <view>  
                <view class="header">  
                    我是固定标题  
                </view>  
                <view class="body">  
                    我是内容  
                </view>  
                <view class="line">  
                    我是父元素高度  
                </view>  
            </view>  
        </scroll-view>  
    </view>  
</template>  
<script>  
    export default {  
        data() {  
            return {  
                title: 'Hello',  
            };  
        },  
        onLoad() {},  
        methods: {}  
    };  
</script>  
<style lang="scss" scoped>  
    .scroll-view {  
        height: 100vw;  
        /* overflow-y: auto; */  
        position: relative;  
        color: #fff;  
        text-align: center;  

        .header {  
            background-color: red;  
            height: 80rpx;  
            line-height: 80rpx;  
            position: sticky;  
            top: 0rpx;  
        }  

        .body {  
            background-color: green;  
            height: 800vh;  
        }  

        .line {  
            position: absolute;  
            top: 0;  
            height: 100%;  
            background-color: royalblue;  
            z-index: 2;  
        }  
    }  
</style>

image.png

方法是在scroll-view中添加一个父级容器，这样可以使用position: sticky根据新添加的父级容器高度来实现吸附效果，而不是根据scroll-view的滚动高度。这是一个很好的解决方案，可以避免在scroll-view中使用position: fixed的问题。