Panorama Média Global

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: 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!

Accepted Answer

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

Answer 2

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>

Panorama Média Global

Position Sticky Not Taking Effect [Duplicate]

2 Answers

Sarah Jenkins