Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- @Component({
- selector: 'app-sticky-header',
- template: `<ng-content></ng-content>`,
- styles: [ ... ]
- })
- export class StickyHeaderComponent implements AfterViewInit {
- private isVisible = true;
- ngAfterViewInit() {
- const scroll$ = fromEvent(window, 'scroll').pipe(
- throttleTime(10),
- map(() => window.pageYOffset),
- pairwise(),
- map(([y1, y2]): Direction => (y2 < y1 ? Direction.Up : Direction.Down)),
- distinctUntilChanged(),
- share()
- );
- const scrollUp$ = scroll$.pipe(
- filter(direction => direction === Direction.Up)
- );
- const scrollDown = scroll$.pipe(
- filter(direction => direction === Direction.Down)
- );
- scrollUp$.subscribe(() => (this.isVisible = true));
- scrollDown.subscribe(() => (this.isVisible = false));
- }
- }
Add Comment
Please, Sign In to add comment