Home » Javascript » javascript – Align Absolutely Positioned Sticky Element to div inside Sibling?

javascript – Align Absolutely Positioned Sticky Element to div inside Sibling?

Posted by: admin February 26, 2020 Leave a comment

Questions:

Say I have the following setup of a blogpost:

    <div>
        <div> //this div has some margin left & right, so the blog post is centered
            <div>Title</div>
            <div>Body</div>
        </div>

        <ContainerAbsolute> //inside the right margin, i absolutely position this container & the sticky side bar inside it.
            <StickySideBar />
        </ContainerAbsolute>
    </div>

I want my StickySideBar to be on the right side and go down along the blog post. I use position:sticky on it. I’ve put it into a container, that is positioned absolutely, and that stretches down the whole page (height: 100%). Now that works. But now I’d like my StickySideBar to be stuck to the level where my Text begins, not the very top. I can do top: 500px and things like that, to approximate this, but how can I align it perfectly to the Body div?

How to&Answers: