How do you keep a left side menu fixed during scroll?

[randyh628]

Hey all!

I tried using a floating group but the menu would literally stay in one spot when scrolling.

I want to create the positioning of a menu exactly like the left menu shown on producthunt.com

It only stays fixed after the menu reaches the top of the screen, then the menu will stay fixed at the top of the page.

Thanks a bunch! Hope that wasn’t too confusing.

Randy

[dbevan]

There are actually 2 groups you have to deal with. The regular group is positioned on the page like any normal group. Then there is a floating group positioned at the top of the page with the height being the same as the page itself. Set the floating group’s “vertical float relative to” to BOTH.

The floating group is NOT visible on page load. When the scrolling position is greater than or equal to “x”, then the floating group is visible.

Here’s an example I did of this: https://strongmanseb.com/

Make sense?
Daniel

[AdrianG001]

HTML:

Side menu

Scroll
Scroll
Scroll

CSS:
html, body {
height: 100%;
margin: 0;
font-size: 20px;
}
#left {
width: 20%;
height: 100%;
position: fixed;
outline: 1px solid;
background: red;
}
#right {
width: 80%;
height: auto;
outline: 1px solid;
position: absolute;
right: 0;
background: blue;
}

Adrian Gates
Sr. Developer - Apps4Rent

[randyh628]

thanks for the prompt reply daniel,

so is regular group with the menu located inside of the floating group?

I literally created the floating group to be 1000w and 1000h, is that too large?

Also, how does one determine the scroll position? Please see my screenshot below if my condition is set up properly.

Thanks again!
Randy

[dbevan]

Yes and no. There are 2 separate menus. One is in a regular group. The other is in a repeating group.

Right now you’re seeing the regular group:

Here, you’re seeing the floating group

The floating group can either have a normal height OR it should be the same as your page’s height. In the 2nd image, you see the “Back To Top” button. That is also in the same floating group.

In regards to you page scrolling, you do current page’s scrolling position is EQUAL TO OR GREATER THAN x. X should be the distance between the top of the page and the regular menu.