How to create sidebar with scrollable content area

Design help General
1

I am working on the collection template “Experten template” and I have the
following problem:

I need the content of the right colum to be fixed WITHOUT overflowing my
footer.
How can I restrict the fixed column to only one section?

Here is my public share link: https://preview.webflow.com/preview/landingpage-6f27c6?preview=4b2bc80ca5f00e50c45f064a925ae940

2

Give the column a lower z index then the footer. Hope this helps. :wink:

3

Hi @Lisa_w, when using fixed position, those elements will be positioned fixed relative to the body. One thing to try is to put a class on the Column two, with some top margin and a lower z-index as @VladimirVitaliyevich mentioned:

624×529 52 KB

When you ask, “How can I restrict the fixed column to only one section?” Are you trying to create some kind of sticky element like this: http://stickyjs.com/

Thanks in advance.

1 Like
4

Yes exactly. The z-index advice works just fine, but I want my content of the right colum to “stop” just before the footer, so the user is able to read the complete content at all times.
Is there a chance I can manage this?

5

Hi @Lisa_w, one suggestion I would have, is to perhaps use a plugin called Sticky-Kit: Sticky-Kit | jQuery plugin for sticky elements

Steps:

  1. Paste the following code to the Footer of your site using custom code: http://help.webflow.com/faq/how-to-add-custom-head-and-body-code-to-a-webflow-site

Save changes and republish the site.

  1. Enter the designer view, and remove the Col class on the right column and instead, give a new class called “sticky-column”

Republish the site and check the published pages. Contents within the column with the “sticky-column” class should be sticky whilst that column is being scrolled and will unstick when the column leaves the viewport.

I hope this helps!

6

Hi Dave,

thanks so much for your help. I’ve tried your custom code but unfortunately this isn’t exactly what I need my right column to do.
I need my right column to be completely visible at all times without disappearing behind the footer.
So bascially on my left column should be scrollable.

Could you take a look at my preview link again?

Thanks so much

https://preview.webflow.com/preview/landingpage-6f27c6?preview=4b2bc80ca5f00e50c45f064a925ae940

7

Hi @Lisa_w, thanks for getting back to me, sorry if I misunderstood what you were trying to accomplish.

It sounds like you are trying to create a sidebar layout with scrollable content area, is that so? Check out this video:

This video shows how to create the scrollable sidebar layout. Does this help?

1 Like
8

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.