offestTop has no effect

[Sumis34]

Im using the code below and the offset top has no effect. Am I using it wrong?

<section className="flex justify-center">
      <div className="w-full max-w-screen-2xl sm:w-5/6 flex items-start gap-10">
        {/* FIXME: Fix offsetTop not working */}
        <StickyBox offsetTop={100} offsetBottom={500}>
          <NewsNav newsItems={newsItems} />
        </StickyBox>
        <div className="w-full">
          {newsItems &&
            newsItems.map() => {
              return ....
            })}
        </div>
      </div>
</section>

[adriandiaz]

Same here...

[danielberndt]

Can you show a more complete example? As far as I could reproduce it here, it works as expected: https://play.tailwindcss.com/OFvXnCVt1a

Does a parent above have an overflow-hidden? This will prevent position: sticky from working unfortunately.

[Sumis34]

Can you show a more complete example? As far as I could reproduce it here, it works as expected: https://play.tailwindcss.com/OFvXnCVt1a

Does a parent above have an overflow-hidden? This will prevent position: sticky from working unfortunately.

But as far as I see, you are not using the StickyBox component im using

[danielberndt]

@Sumis34 I know! But <div style="position:sticky;top:20px;"> is effectively all that StickyBox is doing if it's smaller than the viewport. Using the tailwind playground was just the quickest way to reproduce and share something that mirrors your code above.

[Sumis34]

@danielberndt Ah Ok. I'm using pretty much what I posted. Do you think the problem is with the surrounding code instead of the StickyBox itself?

[danielberndt]

Yes I think so, position: sticky unfortunately has some foot guns. Most notably that there may be no overflow: hidden between the sticky container and the scroll container. I remember that applying a transform to a parent also led to weird behaviour in the past, but I'd start with looking for parents that define an overflow property.