In my Angular project, I've set up different sections on a page, each with its own unique ID. There's also a fixed-position navbar for easy navigation between these sections. My main objective is to ensure that when a user clicks on a menu item (like Section2), the navbar aligns properly as depicted in the linked image.
https://i.sstatic.net/7tRfNGeK.png
To demonstrate the issue, I've prepared a StackBlitz demo. However, due to a compilation error, I had to comment out the line
<!-- <app-nav></app-nav> -->Although I couldn't resolve the compilation error, my primary concern lies in correctly positioning the navbar so it functions seamlessly while scrolling to various sections.
app.routes.ts
export const routes: Routes = [
{ path: 'section-1', component: Section1Component },
{ path: 'section-2', component: Section2Component },
{ path: 'section-3', component: Section3Component },
{ path: 'section-4', component: Section4Component },
{ path: '**', redirectTo: '' },
];
main.ts
<div class="container">
<!-- <app-nav></app-nav> -->
<app-section1></app-section1>
<app-section2></app-section2>
<app-section3></app-section3>
<app-section4></app-section4>
</div>
nav.component.ts
export class NavComponent {
constructor(private viewportScroller: ViewportScroller) {}
public scrollToSection(sectionId: string): void {
this.viewportScroller.scrollToAnchor(sectionId);
}
}