diff --git a/src/app/app.component.html b/src/app/app.component.html index 0fc2628..5cc4e17 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -7,7 +7,8 @@ fxLayout="column" fxLayoutGap="20px" fxLayoutAlign="center end" - > + [ngClass]="{'scrolling': isScrolling}" + > {{ link.label }} + >{{ link.label }}
diff --git a/src/app/app.component.scss b/src/app/app.component.scss index 2d50725..d4f1c99 100644 --- a/src/app/app.component.scss +++ b/src/app/app.component.scss @@ -3,12 +3,17 @@ #menu { position: fixed; top: 0; - right: 0; + right: -300px; z-index: 100; height: 100vh; width: 300px; background-color: rgba(255, 255, 255, 0.8); padding: 80px; + transition: all 1s ease-in-out; + + &.scrolling { + right: 0px; + } a { transition: all 1s ease-in-out 0.5s; diff --git a/src/app/app.component.ts b/src/app/app.component.ts index c157e5f..f7e0df6 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,4 +1,4 @@ -import {AfterViewInit, ChangeDetectionStrategy, Component, QueryList, ViewChildren} from '@angular/core'; +import {AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, HostListener, QueryList, ViewChildren} from '@angular/core'; import {HeaderComponent} from './header/header.component'; import {WelcomeComponent} from './welcome/welcome.component'; import {AboutUsComponent} from './about-us/about-us.component'; @@ -35,8 +35,10 @@ export class AppComponent implements AfterViewInit { currentSection = 'header'; activeLinkTop: number; showIndicator = false; + isScrolling = false; + scrollTimer = -1; - constructor() { + constructor(private changeDetector: ChangeDetectorRef) { } ngAfterViewInit() { @@ -56,10 +58,25 @@ export class AppComponent implements AfterViewInit { onSectionChange(sectionId: string) { this.currentSection = sectionId; this.moveSelectedIndicator(this.currentSection); - console.log('section change to:', sectionId); } scrollTo(section) { document.querySelector('#' + section).scrollIntoView(); } + + @HostListener('window:scroll') + onScroll() { + this.isScrolling = true; + if (this.scrollTimer !== -1) { + clearTimeout(this.scrollTimer); + } + + this.scrollTimer = setTimeout(() => { + this.showIndicator = true; + this.isScrolling = false; + this.scrollTimer = -1; + this.changeDetector.detectChanges(); + }, 2000); + } + }