How To Make Column Sticky

[landonbrower]

Hello ThemeCo Staff,

I am currently working on a portfolio site and I am trying to make a column within a row on one of my pages sticky so that it stays on the page as you scroll through the images. The column contains basic information about the project and I would like that to be readable no matter which image you are looking at.

I have tried adding a tiny snippet of CSS to the element.

$el {
position: fixed;
}

The issue is that this simply drops the element on the top left of the page. I then tried the following:

$el {
position: fixed;
left: 1100px;
}

However I seem to lose the formatting on the bounding area of the column when I do this. I’m not really sure what to do from here. I look forward to your reply.

Thanks,
Landon Brower

[friech]

Hi Landon,

Thank you for writing in, would you mind providing us the direct URL of the page where we can see your sticky column, so we can take a look.

Cheers!

[landonbrower]

Here is the direct URL to the page with the sticky column I am trying to get to work.

MANIFEST CLOTHING COMPANY

I basically want the formatting on the right column to look the same as on this page

GEARSTOKE MAGAZINE

but keep the right column on screen as the user scrolls through the images. Adding the code snippet I did on the column element also created this strange white bounding box around the content area of the page on the Manifest Clothing Co. page.

[ruenel]

Hello There,

To resolve your issue, please update your css and set a maximum width of the column.
For example:

$el {
    position: fixed;
    left: 1100px;
    max-width: 400px;
}

Hope this helps.

[landonbrower]

I updated the CSS on that page and the max-width definitely helps!

I still have two other issues though.

1. White box is still appearing around the content area. If you look at the GEARSTOKE magazine page there is no white box and I would like that to be removed from the Manifest Clothing Co. page.

2. Setting the position of the column manually becomes an issue when viewing the page on difference devices, especially mobile. Is there a way to set the left side of the column to be within a certain number of pixels from the images to the left? That way it maintains a proper position on the page when viewed on multiple devices.

[landonbrower]

I figured out the Content Area issue. I simply changed the page settings in the WP dashboard. Still need help with #2 though.

[landonbrower]

This is what I am currently using.

$el {
position: fixed;
left: 67%;
max-width: 25%;
}

This makes the column scale properly however I am still getting two issues when resizing the window for smaller screens.

1. The sticky column bleeds into the image on the left. Even when I set padding or margin it bleeds into the image.

2)I would like to have the column display at the top of the page above the images once the window gets down to mobile size.

[rad]

Hi there,

It’s common issue with fixed positioning, its dimension is not going to sync with other elements since it’s size is calculated from the window itself. There is no applicable solution but to calculate the size and its responsiveness through jQuery. It’s a complex one so you may need a help from a developer.

The CSS we provided is just to make it sticky as the initial request.

Thanks!