MaDgIK
/
openaire-library
13
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Syncronize page content sticky with navbar

This commit is contained in:
Konstantinos Triantafyllou 2022-03-16 15:10:35 +02:00
parent 1a2925a890
commit ed01151b27
2 changed files with 11 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
dashboard/sharedComponents/page-content/page-content.component.ts
View File

@ -8,8 +8,8 @@ declare var UIkit;
template: ` template: `
<div id="page_content"> <div id="page_content">
<div id="header"> <div id="header">
<div #header id="page_content_header" uk-sticky="top: #header; media: @m" [attr.offset]="offset"> <div id="page_content_header" uk-sticky="media: @m" [attr.offset]="offset">
<div class="uk-container uk-container-large uk-padding-remove-vertical"> <div #header class="uk-container uk-container-large uk-padding-remove-vertical">
<ng-content select="[header]"></ng-content> <ng-content select="[header]"></ng-content>
</div> </div>
</div> </div>
@ -32,29 +32,22 @@ export class PageContentComponent implements OnInit, OnDestroy {
constructor() { constructor() {
} }
@HostListener('window:scroll', ['$event.target']) // for window scroll events
scroll(e) {
let scroll = window.pageYOffset;
let previous = this.offset;
if (scroll > this.current) {
this.offset = 0;
} else {
this.offset = Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--structure-header-height'));
}
if (this.offset !== previous) {
this.initSticky();
}
this.current = scroll;
}
ngOnInit() { ngOnInit() {
if (typeof window !== "undefined") { if (typeof window !== "undefined") {
this.current = window.pageYOffset; this.current = window.pageYOffset;
this.initSticky();
} }
} }
initSticky() { initSticky() {
this.clear(); this.clear();
this.subscriptions.push(UIkit.util.on(document, 'active', '#sticky-menu', (): void => {
this.offset = Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--structure-header-height'));
}));
this.subscriptions.push(UIkit.util.on(document, 'inactive', '#sticky-menu', (): void => {
this.offset = 0;
}));
this.subscriptions.push(UIkit.util.on(document, 'active', '#page_content_header', (): void => { this.subscriptions.push(UIkit.util.on(document, 'active', '#page_content_header', (): void => {
this.sticky = true; this.sticky = true;
this.stickyEmitter.emit(this.sticky); this.stickyEmitter.emit(this.sticky);

2
sharedComponents/navigationBar.component.html
View File

@ -93,7 +93,7 @@
</div> </div>
</div> </div>
<div id="main-menu" class="uk-visible@m"> <div id="main-menu" class="uk-visible@m">
<div class="uk-navbar-container" [ngClass]="portal + '-menu'" <div id="sticky-menu" class="uk-navbar-container" [ngClass]="portal + '-menu'"
uk-sticky="show-on-up: true; top: #main-menu" media="@m" cls-active="uk-active uk-navbar-sticky" uk-sticky="show-on-up: true; top: #main-menu" media="@m" cls-active="uk-active uk-navbar-sticky"
[attr.animation]="(header.stickyAnimation?'uk-animation-slide-top':null)"> [attr.animation]="(header.stickyAnimation?'uk-animation-slide-top':null)">
<div <div