1

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

marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
Marcus Gallegos
  • 1,532
  • 1
  • 16
  • 31

3 Answers3

2

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

Marcus Gallegos
  • 1,532
  • 1
  • 16
  • 31
1

It looks like when you set color="primary" to a toolbar, it makes it sticky, but without any color, it's not sticky (how strange btw, and not documented at least for Angular Material 12).

I could make a mat-toolbar sticky even without a color attribute, by adding these styles:

position: sticky;
top: 0;
bfredo123
  • 462
  • 1
  • 8
  • 20
-1

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?

Yonz
  • 120
  • 6