Div - Position: Sticky

[whitemedia]

Hi,

I have been trying out the new Div element’s Sticky setting. However, it appears not to be doing what I expect (or I am using it incorrectly!) and I wonder if there is something amiss?

My setup is as follows:

• Section
  – Grid (2fr 1fr)
  — Cell 1
  ---- Text (loads of content to ensure scrolling occurs)
  — Cell 2
  ---- Div (position: Sticky; Top: 200px)
  ----- Image

The Div has its position set to Sticky with Top set to 200px.

I had expected that when scrolling, the Div in Cell 2 would become sticky 200px from the top of the screen, just below the header. Instead, it continued scrolling just as position: Relative.

I have tried this on two websites, both fully (earlier this afternoon) up-to-date with Pro 6.4.10.

Have I found a bug, or have I misunderstood the new setting?

Thanks,
Christopher

[DoncoMarketing]

Hi @whitemedia –

Just tried this out on my end in a grid and a row and all works as expected. You do need to make sure that the cell or the column stretches the full height. So you don’t want your row to be set to “auto” you’d likely want something like 1fr (as an example) to ensure that it fills the vertical space. This becomes your sticky rail.

With that cell set, my sticky div inside of cell 2 scrolls with me.

This video might be helpful. While it isn’t using the grid element it does leverage the same principles.

Creating sticky containers in WordPress & Cornerstone

[whitemedia]

Hi @DoncoMarketing,

Many thanks for your helpful suggestions. However, it is not working at this end!

That was one of the few Josh Donnelly videos which passed me by - great! Following the video, I have switched to Row/Column and followed the video to the letter. It does not matter what I do (all plugins disabled), but Column 2 scrolls as if it is Position: Relative. Weird.

In the below screenshot, Column 2 is explicitly set to Height: 100% The Div’s Position is set as in the screenshot.

Previously, I had used custom CSS to deal with the sticky right-hand column, but would much prefer to use native Cornerstone settings! Somehow it does not work for me. This is why I wonder if there may be a strange bug affecting some setups?

Thanks,
Christopher

[DoncoMarketing]

Great catch. Looks like I already had this little bit of CSS on my site prior to recording that video. The reason that it isn’t working is that your body tag needs to be set to overflow-x: visible. This could be added to your global CSS once and then everything will work. Tagging @charlie to see if there is a better way to do this in the future so that the sticky divs work.

body {
overflow-x:visible;
}

[whitemedia]

@DoncoMarketing - fantastic. I thought I was going mad.

I have a sticky signup form on another Pro website, which uses custom CSS and works, but wanted to achieve the same through native Cornerstone. I am sure @charlie will manage to sort the glitch out!

[charlie]

Thanks for the info everybody. On my main testing site I didn’t need the overflow, but I think there’s some plugin changing my body tag. It looks like it’s definitely needed for some reason. It’s probably a bad idea to change the overflow-x for everybody, but I’m going to try just adding in that overflow when a sticky div is on the page. Have a great weekend.

[whitemedia]

Glad the “find” was of help! Have a great weekend yourself,
Christopher

[RubberDuckers]

Whether this is separate or not, I noticed when setting the position to ‘sticky’ it sets a style:
body{overflow-x:visible;}

But that was breaking the view on mobile, so I added this (which is from an old way of doing sticky):

@media (max-width: 766.98px) {
body {
overflow-x: hidden!important;
}
}

Which has fixed it - though would be good if that didn’t need to be added.

In an attempt to fix it, I change the position from sticky to relative on smaller breakpoints but that didn’t remove that style injection.

[Regnalf]

First of all, a HUGE THANK YOU for this information. I just received an inquiry from a customer today asking if this is possible.

Sure, of course, just a professional theme.

But maybe someone can give me the technical background as to why this works with overfly-x, especially why on the X-axis?

[charlie]

I looked more into this and I think using clip instead of visible might help us out here. Does this help anybody else? I have sample CSS below. If it’s useful to everybody as well I can change the overflow injection to use a breakpoint like in @RubberDuckers example?

body { overflow-x: hidden; } breaks position: sticky

 body {
  overflow-x: clip !important;
}

[RubberDuckers]

Hey @charlie - did this ever get implemented? Noticed it just now on a site I added a sticky element to. The page itself is fine but the header (although the sticky element is in the page, well, layout as it’s a blog) still breaks and goes wider than the viewport.
Will apply the fix I suggested for now.
Thanks!

[charlie]

I have not. I was waiting for somebody besides me to try clip to see if that works or just a general discussion on what we’re going to do. I can play around with it more next week.

[Regnalf]

@charlie

overflow-x: clip !important;

Yup, that does the trick too, thanks @charlie

[mircotripoczky]

I’ve achieved that just with the position settings at the inspector of the DIV I wanted to be sticky.
The DIV just lives within a normal column.

best regards
Mirco

[charlie]

Okay we’ll try using clip. And if we need to we’ll move this to a media query only on larger screens. I think it’ll solve what we want to do while not causing a scroll bar to show up. Have a great weekend everybody.