CODEWITHSUNDEEP
angularmaterial-designangular-material-6angular-material-7
Marcus Gallegos
Marcus Gallegos

Reputation: 1592

How to make a sticky Angular Material mat-toolbar?

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

Upvotes: 3

Views: 14260

Answers (3)

bfredo123
bfredo123

Reputation: 582

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;

Upvotes: 3

Yonz
Yonz

Reputation: 180

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?

Upvotes: -1

Marcus Gallegos
Marcus Gallegos

Reputation: 1592

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

Upvotes: 3

Related Questions