Grazie ai progressi fatti da HTML5 e CSS3, i design dei siti web sono sempre più articolati e ricchi di animazioni. Le media query sono uno dei cardini cardine di questa bellezza in quanto ci permettono di riscrivere gli stili al cambiamento delle dimensioni del viewport.
Tuttavia, a volte è necessario modificare lo stile durante lo scroll sulla pagina, in questo caso dobbiamo basarci sugli eventi emessi dal DOM e agire di conseguenza. E' in questo contesto che andremo a creare una direttiva Angular che intercetti lo scroll sulla pagina e renda un elemento sticky se questo tocca il bordo della viewport.
Il primo step consiste nell'inizializzare tutto ciò che ci servirà: una posizione di default, l'elemento a cui la direttiva è associata e il servizio Renderer2 che astrae le operazioni sul DOM.
elementPosition = 999; constructor(@Self() private hostElement: ElementRef, private renderer: Renderer2) {}
Passiamo quindi alla valorizzazione dei parametri minimi che ci consentiranno di modificare lo stile dell'elemento.
ngAfterViewInit(): void { this.elementPosition = this.hostElement.nativeElement.offsetTop; this.renderer.setStyle(this.hostElement.nativeElement, 'z-index', '10'); this.renderer.setStyle(this.hostElement.nativeElement, 'top','0'); }
Come ultimo step, intercettiamo l'evento di scroll emesso dal DOM e impostiamo lo stile sticky.
@HostListener('window:scroll', ['$event']) handleScroll() { const windowScroll = window.pageYOffset; if (windowScroll >= this.elementPosition) { this.renderer.setStyle(this.hostElement.nativeElement, 'position','sticky'); } else { this.renderer.removeStyle(this.hostElement.nativeElement, 'position','static'); } }
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Routing statico e PreRendering in una Blazor Web App
Ottenere il contenuto di una cartella FTP con la libreria FluentFTP
Eseguire operazioni con timeout in React
Gestire domini wildcard in Azure Container Apps
Gestire undefined e partial nelle reactive forms di Angular
Eseguire query manipolando liste di tipi semplici con Entity Framework Core
Potenziare Azure AI Search con la ricerca vettoriale
Applicare il versioning ai nostri endpoint ASP.NET Core Minimal API
Utilizzare i nuovi piani dedicati di Azure Container Apps
Generare file PDF da Blazor WebAssembly con iText
Gestire i null nelle reactive form tipizzate di Angular
Esportare ed analizzare le issue di GitHub con la CLI e GraphQL