不起作用的柱子上粘稠的侧边栏(顺风)

Question

当您滚动侧边栏时，我希望做一些类似于这的东西，就像您看到的那样。

这是我的密码，我不能让它起作用

<template>
    <div class="blog-post">
        <div class="wrapper">
            <aside class="sidebar">
                <div class="sidebar-wrapper">
                    <!--- Content -->
                </div>
            </aside>

            <main class="main-post">
                <!--- Content -->
            </main>
        </div>
    </div>
</template>


<style lang="postcss" scoped>
.blog-post {
    @apply container;
    .wrapper {
        @apply flex gap-x-10 mt-10;
        .sidebar {
            @apply relative h-screen w-3/12 col-span-3 justify-center;
            &-wrapper {
                @apply h-full space-y-4;
            }
        }

        .main-post {
            @apply w-9/12 space-y-4;
        }
    }
}
</style>

看上去如何：

​

粉红色的div，它应该一直向下滚动，但它没有发生。

Answer 1

aside应该是sticky

参见这里的示例：https://play.tailwindcss.com/3AtWWNzmuF