Hi,

Thanks for contacting us. There is no default option to do that, you have to customize it yourself. But I will give you a hint, it may help you.

This can be done with CSS using position: sticky.

Give the left column a custom CSS class, for example:

.sticky-column {
    position: sticky;
    top: 20px;
    align-self: flex-start;
}

Then add sticky-column to the CSS Class field of the left column.

The top: 20px controls how far the text stays from the top of the browser window while scrolling.

One important point: the sticky element needs to be inside the same parent/section that contains the two columns. Also check that none of the parent containers has overflow: hidden, overflow: auto, or overflow: scroll, as this can prevent position: sticky from working.

If you want the text to stop exactly when the bottom of the second image is reached, the two columns should remain inside the same row/section. The sticky element will then stop at the bottom of its parent container.

For example:

.sticky-column {
    position: sticky;
    top: 20px;
    align-self: flex-start;
}

This is generally the simplest way to achieve the effect in SP Page Builder without adding JavaScript.

-Regards.

You have to choose your sites CSS classes, then it will work. This blog will help you to find your CSS class name.

https://www.joomshaper.com/blog/which-line-of-css-i-have-to-edit-code-inspector-in-action

Solved it, using chatgpt :-)

add this in the settings of the column : CSS Class = sticky-column

add this to custom code section of the template :

.body-innerwrapper {
    overflow-x: clip;
}
.sticky-column {
    position: -webkit-sticky;
    position: sticky;
    top: 80px;
    align-self: flex-start;
    height: fit-content;
}

Glad to know that and thanks for accepting the answer.