How to make a sticky Angular Material mat-toolbar?

Question

I've been trying to implement a mat-toolbar that is located after the initial navigation bar and I can't seem to get it right. I've tried adding the class "position-fixed."

This would work if the initial position was at the top of the page but it is not. Once the user scrolls past the toolbar, it should "stick" to the top of the page.

Any ideas how to implement this? I've tried combinations of

.stickyBar { position: sticky; }

and the position-fixed but no luck.

Any ideas? Thanks

Answer 1

There were parent elements with the css property overflow: hidden which interferes with position: sticky. Here's the post used to solve my question.

Answer 2

Make the change below:

mat-toolbar{
  display: initial;
}
.stickyBar {
  position: sticky;
  top: 0;
}

As soon as you add the <mat-toolbar> parent with a particular height, the stickybar will only stay stuck for the size of the toolbar. In other-words, if you set the height of the toolbar to 10vh you will see that the sticky-bar stays stuck for the 10vh space. The reason is that the sticky-ness is only applied to the parent container's share of the viewport. Workaround from: Why is my position:sticky not working?