How do I make Navigation Component Stick to top in Angular

Injected into my component is a navigation bar. Code is similar to below.

<app-shopping-nav ></app-shopping-nav>    <div class="body>  Content goes here  </div>  

I want the

<app-shopping-nav ></app-shopping-nav>   

injection to stick on top on scroll down.

here's what I have tried:

1. I tried adding class to it

2. I also tried wrapping it around a span with the a class

Here is the css class

.stickNav{      position: -webkit-sticky;      position: sticky;      top: 0;      z-index: 2;      overflow: hidden;      z-index: 2;  }  

https://stackoverflow.com/questions/66083823/how-do-i-make-navigation-component-stick-to-top-in-angular February 07, 2021 at 09:51AM