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
Sfruttare al massimo i topic space di Event Grid MQTT
Creare alias per tipi generici e tuple in C#
Filtrare e rimuovere gli elementi dalla cache del browser tramite le API JavaScript
Sostituire la GitHub Action di login su private registry
Miglioramenti nell'accessibilità con Angular CDK
Controllare gli accessi IP alle app con Azure Container Apps
Utilizzare un service principal per accedere a Azure Container Registry
Implementare l'infinite scroll con QuickGrid in Blazor Server
Usare le variabili per personalizzare gli stili CSS
Come EF 8 ha ottimizzato le query che usano il metodo Contains
Hosting di componenti WebAssembly in un'applicazione Blazor static
Evitare (o ridurre) il repo-jacking sulle GitHub Actions