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

Change page-content to be sticky on scroll up

This commit is contained in:
Konstantinos Triantafyllou 2022-03-08 20:35:00 +02:00
parent f5b4677b63
commit d7598eb350
2 changed files with 4 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -15,31 +15,10 @@ import {ChangeDetectorRef, Component, HostListener, OnDestroy, OnInit} from "@an
</div> </div>
` `
}) })
export class PageContentComponent implements OnInit, OnDestroy{ export class PageContentComponent implements OnInit{
private current;
public offset: string; public offset: string;
constructor(private cdr: ChangeDetectorRef) {
}
@HostListener('window:scroll', ['$event.target']) // for window scroll events
scroll(e) {
let scroll = e.scrollingElement.scrollTop;
if (scroll > this.current) {
this.offset = '0';
} else {
this.offset = getComputedStyle(document.documentElement).getPropertyValue('--structure-header-height');
}
this.current = scroll;
this.cdr.detectChanges();
}
ngOnInit() { ngOnInit() {
if(typeof window !== "undefined") { this.offset = getComputedStyle(document.documentElement).getPropertyValue('--structure-header-height');
this.current = window.pageYOffset;
}
}
ngOnDestroy() {
} }
} }

4
sharedComponents/navigationBar.component.html
View File

@ -266,7 +266,7 @@
<img *ngIf="(mobile && header.logoSmallUrl) || (!mobile && header.logoUrl)" <img *ngIf="(mobile && header.logoSmallUrl) || (!mobile && header.logoUrl)"
[src]="!mobile?header.logoUrl:header.logoSmallUrl" [src]="!mobile?header.logoUrl:header.logoSmallUrl"
[alt]="header.title" [alt]="header.title"
class="uk-responsive-height"> class="uk-width-1-1">
<ng-container *ngIf="(mobile && !header.logoSmallUrl) || (!mobile && !header.logoUrl)"> <ng-container *ngIf="(mobile && !header.logoSmallUrl) || (!mobile && !header.logoUrl)">
<div class="multi-line-ellipsis lines-2" [style.max-width]="(!mobile)?'25vw':null" [title]="header.title"> <div class="multi-line-ellipsis lines-2" [style.max-width]="(!mobile)?'25vw':null" [title]="header.title">
<p class="uk-margin-remove">{{header.title}}</p> <p class="uk-margin-remove">{{header.title}}</p>
@ -278,7 +278,7 @@
<img *ngIf="(mobile && header.logoSmallUrl) || (!mobile && header.logoUrl)" <img *ngIf="(mobile && header.logoSmallUrl) || (!mobile && header.logoUrl)"
[src]="!mobile?header.logoUrl:header.logoSmallUrl" [src]="!mobile?header.logoUrl:header.logoSmallUrl"
[alt]="header.title" [alt]="header.title"
class="uk-responsive-height"> class="uk-width-1-1">
<ng-container *ngIf="(mobile && !header.logoSmallUrl) || (!mobile && !header.logoUrl)"> <ng-container *ngIf="(mobile && !header.logoSmallUrl) || (!mobile && !header.logoUrl)">
<div class="multi-line-ellipsis lines-2" [style.max-width]="(!mobile)?'25vw':null" [title]="header.title"> <div class="multi-line-ellipsis lines-2" [style.max-width]="(!mobile)?'25vw':null" [title]="header.title">
<p class="uk-margin-remove">{{header.title}}</p> <p class="uk-margin-remove">{{header.title}}</p>