15

I have an issue with sticky position.

This works:

<html>

<body style="height: 2000px; ">
    <div style="height: 100px;"></div>
    <div style="position: sticky; top: 10px;">LOREM IPSUM</div>
</body>

</html>

This doesn't work:

<html>

<body style="height: 2000px; ">
    <div style="height: 100px;"></div>
    <div>
            <div style="position: sticky; top: 10px;">LOREM IPSUM</div>
    </div>
</body>

</html>

My question is: why the inner div is not sticky? I tested it with Chrome 64.

Gajanan Kulkarni
  • 697
  • 6
  • 22
Robert Moszczynski
  • 1,081
  • 2
  • 16
  • 26
  • inner div is sticky to it's container div --> and it's working find in your case – Temani Afif Feb 12 '18 at 15:18
  • I am sure it works, except the parent of the sticky has no defined height(auto) so it will get scrolled past as soon as you past the sticky itself. The position sticky is relative to its parent. https://developer.mozilla.org/en-US/docs/Web/CSS/position – Huangism Feb 12 '18 at 15:18
  • @Huangism the parent will never get scrolled :) the scroll is on the body and thus only sticky element inside body will work as he expect – Temani Afif Feb 12 '18 at 15:19
  • @TemaniAfif it is still sticky, it's just that you will never see it due to the lack of height on the parent – Huangism Feb 12 '18 at 15:21
  • @Huangism yes that's what i said :) it's working fine and it's sticky and his parent will never be scrolled ;) because simply there is no way to have scroll with it – Temani Afif Feb 12 '18 at 15:22
  • Thanks, I can see it too that the element is sticky to its parent but my implicit question is how to enforce it to `body`. – Robert Moszczynski Feb 12 '18 at 15:25
  • @RobertMoszczynski then use position fixed, the link in my first comment has info on fixed positioning as well – Huangism Feb 12 '18 at 15:26
  • @Huangism I woul'd but I can't becaut there is a big hero section above it. I have to scroll down to see the element I want to fix when the user scrolls down. It is a skyscraper banner nested in divs like hell. – Robert Moszczynski Feb 12 '18 at 15:30
  • @RobertMoszczynski ok I am guessing this banner is under the hero but you want it to stick after you scroll past it. Use a container to wrap the banner and whatever content is under the hero and put the banner as a child of the container. If you cannot do that, then you need to use js to dock the banner when you scroll past it – Huangism Feb 12 '18 at 15:34
  • @Huangism No, this not possible because I have a superbanner and a skyscraper in one containter because this is served as one placement. The superbanner should not be sticky. So I have to dock the skyscraper with JS if there is no CSS solution. – Robert Moszczynski Feb 12 '18 at 15:41
  • 1
    I would consider pushing back on this because no one likes a docked ad. But if you are serving a client you can tell them this is a bad user experience + the complexity it adds. You will have to stick to js then there is no way to do with css and html only – Huangism Feb 12 '18 at 15:46

0 Answers0