Sticky Menu On top of page

Anvil Q&A
1

What I’m trying to do:

I’m trying to have a “floating” menu on the top of my page that sticks to the top on scroll.

W3Schools Tryit Editor

What I’ve tried and what’s not working:

I’ve tried adding a “sticky” role and applying it to my column panel.

Code Sample:

.anvil-role-sticky {
  position: -webkit-sticky;
  position: -sticky;
  top: 0;
}

Clone link:
share a copy of your app

2

you should only need position: sticky; top:0

A quick look at your clone, and the issue seems to be that you’re putting the menu at the top of something where the container isn’t scrollable.

You probably want to define something in standard-page.html below the .structure element.

3

Thank you Stu.

So I tried a bit different approach. I created a “Scrollable” role and added it to the content panel containing the sticky menu. ( I wanted to simulate how I would be using this in practice). The panel is now small and scrollable.

.anvil-role-scrollable {
  max-height:300px;
  overflow-y:auto;
}

Still seems to not be working. (Same link above)

4

I don’t think you’ll ever be able to achieve this inside a ColumnPanel i’m afraid.

Try replace the ColumnPanel with a LinearPanel instead
Give the LinearPanel a role, e.g. scrollable-sticky

.anvil-role-scrollable-sticky > ul {
    overflow-y: auto;
    max-height: 300px;
}

.anvil-role-scrollable-sticky > ul > li:first-child {
    position: sticky;
    top: 0;
}

Make sure the first element you add has spacing-above set to none
Your first element in the LinearPanel is the sticky element
Then you can put the rest of your elements in
Or add ColumnPanel as the second element and fill that as before

5

That’s almost there! The elements that aren’t stick float over , not under the sticky element.

Thank you Stu!

6

Fixed it with z-index!

Here is the final code:

.anvil-role-scrollable-sticky > ul {
    overflow-y: auto;
    max-height: 300px;
}

.anvil-role-scrollable-sticky > ul > li:first-child {
    position: sticky;
    top: 0;
    z-index:12;
    box-shadow: 0px 5px 20px 1px;
}

and result:

FloatExmpl

Thank you @stucork !

1 Like