0

I'm looking to make something similar to this As you can see, when you scroll the sidebar follows you.

This is my code, i can't make it 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>

How it looks: image

The pink div, it's supposed to go all the way down when scrolling, but it doesn't happen.

regex
  • 263
  • 4
  • 11

1 Answers1

1

The aside should be sticky

see the example here : https://play.tailwindcss.com/3AtWWNzmuF

Dhaifallah
  • 1,437
  • 1
  • 5
  • 19
  • Almost there! But now I have double scrollbar. [image](https://i.imgur.com/TANT2Gr.png) – regex Apr 04 '22 at 21:50
  • 1
    @matifanger maybe I didn't understand well, do you mean like this : https://play.tailwindcss.com/3AtWWNzmuF – Dhaifallah Apr 04 '22 at 22:46
  • Well, it's seems that should be working, I tried your code but still not. I just copy & pasted your whole code, SHOULD be working but not in my website. I can't understand. – regex Apr 04 '22 at 23:05
  • @matifanger probably have to do with the overall height of some of your containers. – kissu Apr 05 '22 at 01:37
  • @matifanger as kissu mentioned, it might be related to the container where you imported this component, if you provided more code or made a small codesandbox it would be helpful to understand the problem – Dhaifallah Apr 05 '22 at 02:47
  • @Dhaifallah okay so this is pretty weird. I tried part of the code in the [sandbox](https://codesandbox.io/s/keen-elbakyan-tbzmmc?file=/pages/index.vue). It's working. I just sandboxed only the layout + page. I can't get it. Expand to LG or XL breakpoint to see perfectly. – regex Apr 06 '22 at 02:36
  • @Dhaifallah you should edit your answer with your comment made in Apr 4 at 22:46, that's the correct solution, so I can mark it. – regex Apr 19 '22 at 19:50
  • [The reason why it was not working](https://stackoverflow.com/questions/47095596/body-overflow-x-hidden-breaks-position-sticky) – regex Apr 19 '22 at 19:54
  • @regex ok , I will update the answer – Dhaifallah Apr 22 '22 at 19:01