Trying to implement a sticky menu in an angular 14 project using angular material 14 has been quite challenging for me.
Initially, I attempted to use the 'fixed' position, but encountered issues where the menu would consistently return to the top of the page whenever any action was performed.
.handler {
/* view stackblitz for complete code */
position: fixed;
right: 0;
top: 40vh;
/* view stackblitz for complete code */
}
Switching to the 'sticky' position seemed like a better alternative at first, as it followed the scrolling behavior correctly, but now I am left with an empty space above the menu that refuses to disappear.
.handler {
/* view stackblitz for complete code */
position: sticky;
right: 0;
top: 40vh;
/* view stackblitz for complete code */
}
https://i.stack.imgur.com/lLl23.png
The blue section represents the mat-toolbar inside the mat-sidenav while the white space at the top of the page seems to be occupied by what appears to be the component containing my sticky menu. Even after applying styles directly from the app.component.css, the unwanted space persists.
Since my original codebase is quite extensive, I have created a stackblitz demo to showcase and replicate the issue I am facing. While searching for solutions, I came across a related question on SO here, however, it did not provide a viable solution. Could it be possible that Angular Material is somehow interfering with my styles?