前端 - uniapp在scroll-view的子元素使用粘性定位固定在顶部，当滑动一定距离后粘性定位会失效？

Question

uniapp在scroll-view的子元素使用粘性定位固定在顶部，当滑动一定距离后粘性定位会失效，大概是滑动相当于为scroll设置的高度

<template>    <view class="leader_content">        <!-- 导航小图标 -->        <view class="tabber flex justify-center align-center" :style="{ paddingTop: statusBarHeight + 'px', height: statusBarHeight + 44 + 'px' }" :class="bgWhite ? 'bgWhite' : ''">            <view class="title">hello world!</view>        </view>        <scroll-view class="scroll" scroll-y="true" @scroll="scroll">            <view :style="{ height: statusBarHeight + 44 + 'px' }"></view>            <view class="info" :class="bgWhite ? 'bgWhite' : ''" id="info" :style="{ top: statusBarHeight + 44 + 'px' }">                <view class="title">                    {{ info.title }}                </view>                <view class="date">                    {{ info.date }}                </view>            </view>            <view class="list">                <block v-if="info.detail">                    <view class="content" v-html="info.detail"></view>                </block>            </view>        </scroll-view>    </view></template><script>var statusBarHeight = uni.getSystemInfoSync().statusBarHeight;export default {    data() {        return {            bgWhite: false,            statusBarHeight: statusBarHeight,            returnShow: true, //判断顶部返回是否出现            info: {                title: '欢迎来到我的小屋',                date: '2024-05-29 17:24:44',                detail: `welcome to my honey home`            }        };    },    methods: {        scroll(e) {            var that = this;            const query = uni.createSelectorQuery().in(this);            let select = `#info`;            query                .select(select)                .boundingClientRect((data) => {                    if (data.top <= that.statusBarHeight + 44) {                        that.bgWhite = true;                    } else if (that.bgWhite == true) {                        that.bgWhite = false;                    }                })                .exec();            query                .select('.list')                .boundingClientRect((data) => {                    console.log(data.top);                })                .exec();        }    }};</script><style lang="scss" scoped>view {    box-sizing: border-box;}.tabber {    position: fixed;    height: 44px;    z-index: 9999;    width: 100%;    color: #ffffff;    font-weight: 700;    text-align: center;    font-size: 36rpx;}.flex {    display: flex;}.justify-center {    justify-content: center;}.align-center {    align-items: center;}.leader_content {    background-color: #f3f5f7;    .bgWhite {        background-color: #fff;        color: #333333;    }    .info {        padding: 20rpx;        position: sticky;        .title {            font-size: 36rpx;            font-weight: 700;            color: #333333;        }        .date {            color: #666666;            font-size: 24rpx;        }    }    .scroll {        height: 100vh;        background-color: #f3f5f7;        box-sizing: border-box;        .list {            padding: 20rpx;            height: 4000rpx;            background-color: #55aaff;        }    }}</style>

试图使用绝对定位实现类似效果，但是会出现闪烁的问题。如何解决粘性定位失效或者有替代方法？

Answer 1

position: sticky; 是一个相对较新的 CSS 定位属性，它在不同的浏览器和环境中可能表现不一致。可能会遇到一些限制和兼容性问题。

以下是一些可能导致 position: sticky; 在 scroll-view 中失效的原因和解决方案：

1.浏览器兼容性：首先，确保你正在使用的浏览器或环境支持 position: sticky;。你可以查看 MDN Web Docs 或其他资源来获取最新的兼容性信息。

2.父元素样式：确保 scroll-view 的父元素没有设置 overflow: hidden; 或其他可能干扰滚动或定位的属性。

3.scroll-view 的样式：确保 scroll-view 本身具有足够的滚动空间，以便你可以滚动并看到粘性定位的效果。此外，检查 scroll-view 的高度是否已正确设置，以避免其他 CSS 规则（如 min-height 或 max-height）干扰其滚动行为。

4.粘性定位元素的样式：确保你已经为粘性定位元素设置了正确的 top、right、bottom 或 left 值。这些值定义了元素在滚动到哪个位置后开始固定。

5.z-index：如果其他元素覆盖了你的粘性定位元素，尝试使用 z-index 来调整元素的堆叠顺序。

6.使用替代方案：如果 position: sticky; 在你的项目中不起作用，你可以考虑使用其他方法来实现相同的效果。例如，你可以使用 JavaScript 监听 scroll-view 的滚动事件，并动态地调整元素的位置。或者，你可以使用 CSS 的 fixed 定位，但请注意这可能需要额外的布局调整来避免遮挡其他内容。

7.检查 uni-app 的版本和文档：确保你正在使用最新版本的 uni-app，并查阅其官方文档以了解是否有关于 scroll-view 和定位属性的特定说明或限制。

8.在真机或模拟器上测试：由于某些 CSS 属性和行为可能在不同的设备和浏览器引擎上表现不同，因此建议在真实设备或模拟器上测试你的应用，以确保粘性定位按预期工作。

Answer 2

粘性定位是相对于其最近的具有滚动条的祖先元素的，如果没有滚动条的祖先元素，粘性定位可能会失效。
粘性定位的标准要求元素不能超出其包含块的边界。这意味着元素不能超出其父元素或祖先元素的边界。

综上就不难理解会出现这种现象了，你可以试着把info放到scroll-view外面