How to create fixed toolbar under another toolbar

Question

I want to create toolbar under toolbar, first toolbar is not fixed, second bar is fixed, second bar fixed in the top of the screen like in the site: https://www.lingvolive.com/ru-ru/translate/en-ru/overflow . How to do it in angular with material.

Answer 1

This isn't angular specific and can be accomplished with simple css. Here are some docs on the subject https://developer.mozilla.org/en-US/docs/Web/CSS/position#sticky_positioning

Answer 2

something like this should do it:

<div>top toolbar</div>
<div style="position: sticky; top: 0; position: -webkit-sticky;">Sticky Toolbar</div>

 <div>top toolbar</div> <div style="background-color: red; position: sticky; top: 0; position: -webkit-sticky;">Sticky Toolbar</div> <p>Padding for scroll</p> <p>Padding for scroll</p> <p>Padding for scroll</p> <p>Padding for scroll</p> <p>Padding for scroll</p> <p>Padding for scroll</p> <p>Padding for scroll</p> <p>Padding for scroll</p>