Scrolling Text

HTML & CSS
1

Hello,

I have 3 small paragraphs of text.
I am trying to create a section that will stick to the screen when scrolling down, and while the section is sticky and the user is scrolling down, the paragraphs will go up until the point that the third paragraph only will be visible and then the user will be able to continue scrolling down to the rest sections.
So the 3 paragraphs are vertically aligned and at the end only the last one will be visible.

I am not sure if what I am saying is confusing, or clear.
Has anyone tried something similar?

2

Hi

It would be great if you shared the code that you use so that it would be more clear where and what exactly you are doing.

But in general, the following may be suitable (This is a simple example, probably not suitable, but I hope it’s the other way around)

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Sticky Section</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="sticky-container">
    <div class="sticky-section">
      <p class="paragraph">This is the first paragraph.</p>
      <p class="paragraph">This is the second paragraph.</p>
      <p class="paragraph">This is the third paragraph.</p>
    </div>
  </div>
  <div class="rest-of-content">
    <p>Here is the rest of the content...</p>
  </div>
</body>
</html>

CSS

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  line-height: 1.6;
}

.sticky-container {
  position: relative;
  height: 200vh; /* This ensures enough space for scrolling effect */
}

.sticky-section {
  position: sticky;
  top: 0;
  height: 100vh; /* Full viewport height */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.paragraph {
  flex: 1;
  margin: 0;
  padding: 1rem;
  background: #f0f0f0;
  border: 1px solid #ddd;
  text-align: center;
}

.rest-of-content {
  padding: 2rem;
  background: #eaeaea;
}

position: sticky: This keeps the .sticky-section fixed at the top of the viewport as you scroll.
flex-direction: column: This ensures the paragraphs are aligned vertically.
flex: 1 on the paragraphs: Makes each paragraph take equal height within the sticky container.
As the user scrolls, the top paragraphs disappear, and only the last paragraph is fully visible before the next section becomes scrollable.

3

position:sticky can be used for that.

I think you’d need to give a bit more information as to what you want as Ilm not sure if you are talking about sticking a side column of content while another main column scrolls or you want to stick some content in a main column while the rest of it scrolls.

e.g. Like this: