Position sticky not taking effect

Question

I have added this code to my website but there is no effect:

.wp-block-column:not(:first-child) {
    position: sticky;
    top: 0px;
}

Here I share a fiddle to demonstrate: https://jsfiddle.net/9xb0q8fw/1/ Screen must be at least 790px wide.

I would like that the right column stays sticky until the left column has passed while scrolling down.

But position:sticky; is not taking effekt.

Thank you for any help!

which browser are u using? The `sticky` value is not so much supported (because it is "new") [see can i use page](https://caniuse.com/#feat=css-sticky) — Sysix, Mar 11 '19 at 17:12

score 0 · Accepted Answer · answered Mar 11 '19 at 17:20

0

The sticky element in your fiddle has no height setting - use a set height to avoid that, then the sticky position works:

https://jsfiddle.net/rocz5nL1/

answered Mar 11 '19 at 17:20

Johannes

64,305
18
73
130

1

I want to elaborate as the height solves this issue the basis of the issue is that the flex is causing the column to stretch the full height of the parent. Sticky doesn't always require a defined height. – jerrylow Mar 11 '19 at 17:38

score 0 · Answer 2 · answered Mar 11 '19 at 17:38

position: sticky only works when the parent element around it has a larger height, and when it reaches the end of that element it "bottoms out". So if the wrapping parent element is the same height as the sticky element, it never gets a chance to become sticky. See this demo for a working example of what I mean.

.container {
  height: 900px;
}

.content-half {
  float: left;
  width: 50%;
  background: #EEE;
}

.i-am-sticky {
  position: sticky;
  top: 0px;
  padding: 10px;
  margin: 10px;
  border: 1px solid blue;
  background-color: #333;
  color: #FFF;
}

<div class="container">
  <div class="content-half">
    <div class="i-am-sticky">Sticky - not working b/c parent is too short</div>
  </div>

  <div class="content-half" style="height: 500px;">
    <div class="i-am-sticky">Sticky - works b/c parent has height!</div>
  </div>
</div>

Position sticky not taking effect

2 Answers2