split columns lay-out with fixed and scrollable column

[dequal]

Hi there!

I was wondering if there was by any chance an easy solution or possibility to have a lay-out with two or three columns, of which one is fixed (for example text or caption of a project) and the second column is scrollable (with the images of a project).

So you can scroll through the images, but the project text remains on the top at all times.

Thank you for any input.

Kind regards,
Fréderic

[arminunruh]

https://www.dropbox.com/scl/fi/6k40szon92mkc2bei308t/Screen-Recording-2023-08-28-at-11.14.57.mov?rlkey=swq8kcabaphizk66e9jvaw1yg&dl=0

i think you can just give an element a class of "fixed" and use this css:

.fixed{
    position: fixed;
    top: 50px;
}

is that what you mean?

you could also give it a z-index to overlap other elements:
.fixed{
position: fixed;
top: 50px;
z-index: 99;
}

[dequal]

@arminunruh thank you for the solution. This could work indeed.

And let's say I would want two separately scrollable columns, next to the fixed column.
Would there me an 'easy' css solution for this?
The end result would be a fixed first column with text and description, a second column with photos of final result, a third column with black & white behind the scenes.
Most interesting part would be that we would have a full sized web page without a scroll bar on the right side of the screen and that users can separately scroll the 2nd or 3rd column.

Thank you for the input.

[arminunruh]

well you could have two scrollable columns using this tutorial:
https://laytheme.com/tutorials/create-a-splitscreen-website.html

/* using "body>.lay-content #grid" instead of "#grid" for compatibility with "Overlay Feature" */
    body>.lay-content #grid, #footer-region {
        height: 100%;
        position: fixed;
        top: 0;
        overflow-y: scroll;
        overflow: -moz-scrollbars-none;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    #footer-region {
        left: 33.3333%;
        width: 33.3333%;
    }
    #footer{
        box-sizing: border-box;
        min-height: 100%;
    }
    body>.lay-content #grid {
        right: 0;
        width: 33.3333%;
    }
    body>.lay-content #grid{
        box-sizing: border-box;
    }
    ::-webkit-scrollbar {
        display: none;
    }

this way you have 2 columns. one in the middle and one on the right.

but the one in the middle is the footer page, so it will always be the same content, no matter what page you're on!

using this css as described on my last post can place something to be fixed.

.fixed{
position: fixed;
top: 50px;
left: 30px;
}

maybe that element that uses the class .fixed can be on the far left by using the "left: 30px;" part, making it seem like its the left column.

you may need to do something like:

.fixed{
position: fixed;
top: 50px;
left: calc(-66% + 30px);
}

not sure

other than that there is no way to have 3 columns with content