remove unwanted space from sticky div

Question

In an angular 14 project using angular material 14, I am trying to make a sticky menu.

First I have tried with fixed, but whenever I do something the menu returns to the top of the page.

.handler {
  /* watch stackblitz for full code */
  position: fixed;
  right: 0;
  top: 40vh
  /* watch stackblitz for full code */
}

Then I have tried with this approach and despite being actually following the scrolling action, now I have an empty space above the menu that just doesn't dissappear.

.handler {
  /* watch stackblitz for full code */
  position: sticky;
  right: 0;
  top: 40vh
  /* watch stackblitz for full code */
}

Here the blue is the mat-toolbar inside the mat-sidenav and the white space is at the top of the page, in the inspector appears as if it was the component that contains my sticky menu but despite applying styles to it from the app.component.css not even that makes it disappear.

The original codebase is kinda large so I have made a stackblitz to replicate my issue. The closest related question on SO was this one but didn't help, I might be wrong here but Material migth be affecting my styles or something?.

yeah, the intention is having it in the middle of Y axis of the page, aligned to the right, the problem is not that is down there, the problem is there is an empty space down there that appears out of nowhere. — Carepollo, Oct 05 '22 at 18:24

score 0 · Accepted Answer · answered Oct 05 '22 at 19:35

I found a workaround modifying the HTML like this

<menu></menu>
<main>
   <!-- rest of code goes here -->
</main>

Without any external style and from the component itself, leave the css like this.

.handler {
    /* code goes here */
    position: fixed;
    right: 0;
    top: 40vh;
    /* code goes here */
}

remove unwanted space from sticky div

1 Answers1