I am trying to create a layout similar to this website. One of the key features I want to replicate is the sidebar that follows you as you scroll.
Here is the code I have, but unfortunately, I can't seem to get it to work:
<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>
Visually, this is how it currently appears:
The pink div should extend all the way down when scrolling, but for some reason, it does not behave as expected.