CODEWITHSUNDEEP
angular
Markus
Markus

Reputation: 85

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;
}

Upvotes: 0

Views: 877

Answers (1)

Srijon Chakraborty
Srijon Chakraborty

Reputation: 2164

I think I have a solution for you. It seems like a tricky problem. Here is a solution given below =>

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

It should work. I have made a demo for you in stackblitz. Please check and let me know. Working Demo in StackBlitz.

Upvotes: 1

Related Questions