CODEWITHSUNDEEP
htmlcssscrollpositionsticky
AdrianBorkala
AdrianBorkala

Reputation: 179

Scrolling effect: Div scrolls into view, stops once centrered vertically with position: sticky, and then scrolls off screen

I'm not sure this is possible without using javascript but thought I'd ask to see if anyone has worked out a pure css way of doing this.

So I have 2 columns, and I'd like one to display a bunch of images as you scroll, and the other to display some text. The text should scroll into view, and then stick in the middle of the screen until the images have all scrolled through and then scroll off screen with the images, for the next section to scroll into view. Using top: 50% will stick the text to half way down the view but I'm looking for a way for it to stick to the centre of the view rather. Any ideas?

section {
  height: 200vh;
}

.container {
    max-width: 1400px;
    margin: 0 auto;
}

.row {
    display: flex;
}

.col {
    flex: 1;
}

.sticky-content {
    position: -webkit-sticky;
    position: sticky;
    top: 50%; /* I can set this to about 30% to make sure most of the time it looks about right, but it's not the same as getting this div to centre exactly in the middle vertically until it's time to scroll off the screen */
}

img {
  width: 100%;
  height: auto;
  }
<section>
  <div class="container">
    <div class="row">
      <div class="col">
        <div class="sticky-content">
          <h2>A heading</h2>
          <p>Some content</p>
          <p>Some content</p>
          <p>Some content</p>
        </div>
      </div>
      <div class="col">
        <div>
          <img src="https://via.placeholder.com/600x200">
          <img src="https://via.placeholder.com/600x200">
          <img src="https://via.placeholder.com/600x200">
          <img src="https://via.placeholder.com/600x200">
          <img src="https://via.placeholder.com/600x200">
        </div>
      </div>
    </div>
  </div>
</section>
<section>
  <div class="container">
    <div class="row">
      <div class="col">
        <div class="sticky-content">
          <h2>A heading</h2>
          <p>Some content</p>
          <p>Some content</p>
          <p>Some content</p>
          <p>Some content</p>
          <p>Some content</p>
        </div>
      </div>
      <div class="col">
        <div>
          <img src="https://via.placeholder.com/600x200">
          <img src="https://via.placeholder.com/600x200">
          <img src="https://via.placeholder.com/600x200">
          <img src="https://via.placeholder.com/600x200">
          <img src="https://via.placeholder.com/600x200">
        </div>
      </div>
    </div>
  </div>
</section>

Upvotes: 0

Views: 402

Answers (1)

phucbm
phucbm

Reputation: 893

You're close, you're having top:50%;, now give the .sticky-content a transform:translateY(-50%); to pull it back 50% of its height, and then you have it vertically centered. Is this what you expect?

section {
  height: 200vh;
}

.container {
    max-width: 1400px;
    margin: 0 auto;
}

.row {
    display: flex;
}

.col {
    flex: 1;
}

.sticky-content {
    position: -webkit-sticky;
    position: sticky;
    top: 50%; /* I can set this to about 30% to make sure most of the time it looks about right, but it's not the same as getting this div to centre exactly in the middle vertically until it's time to scroll off the screen */
    transform:translateY(-50%);
}

img {
  width: 100%;
  height: auto;
  }
<section>
  <div class="container">
    <div class="row">
      <div class="col">
        <div class="sticky-content">
          <h2>A heading</h2>
          <p>Some content</p>
          <p>Some content</p>
          <p>Some content</p>
        </div>
      </div>
      <div class="col">
        <div>
          <img src="https://via.placeholder.com/600x200">
          <img src="https://via.placeholder.com/600x200">
          <img src="https://via.placeholder.com/600x200">
          <img src="https://via.placeholder.com/600x200">
          <img src="https://via.placeholder.com/600x200">
        </div>
      </div>
    </div>
  </div>
</section>
<section>
  <div class="container">
    <div class="row">
      <div class="col">
        <div class="sticky-content">
          <h2>A heading</h2>
          <p>Some content</p>
          <p>Some content</p>
          <p>Some content</p>
          <p>Some content</p>
          <p>Some content</p>
        </div>
      </div>
      <div class="col">
        <div>
          <img src="https://via.placeholder.com/600x200">
          <img src="https://via.placeholder.com/600x200">
          <img src="https://via.placeholder.com/600x200">
          <img src="https://via.placeholder.com/600x200">
          <img src="https://via.placeholder.com/600x200">
        </div>
      </div>
    </div>
  </div>
</section>

Upvotes: 1

Related Questions