typescript - polyfill de posición: sticky para angular 2
¿Hay algún polyfill disponible para Angular 2 position:sticky? He podido encontrar algunos, pero la mayoría están basados en jQuery, parece que no hay ninguna implementación disponible para Angular 2:
https://github.com/wilddeer/stickyfill
Necesito conocer el uso de ejemplo con Angular 2,
para Javascript es el siguiente:
var stickyElements = document.getElementsByClassName('sticky');
for (var i = stickyElements.length - 1; i >= 0; i--) {
Stickyfill.add(stickyElements[i]);
}
Respuesta #1
Lo agregué como una directiva en Angular 1.4 y paquete npm "stickyfilljs":"^2.0.3"
import { Directive, ElementRef } from '@angular/core';
import * as Stickyfill from 'stickyfilljs';
@Directive({
selector: '[StickyPolyfill]'
})
export class StickyPolyfillDirective {
constructor(private elementRef: ElementRef) { }
ngAfterViewInit() {
Stickyfill.addOne(this.elementRef.nativeElement);
}
}
Y en el componente tengo:
<div class="top-bar-container stickyMenu" StickyPolyfill>
No olvides incluir sticky en CSS:
.stickyMenu {
position: -webkit-sticky;
position: -moz-sticky;
position: -o-sticky;
position: -ms-sticky;
position: sticky;
top: 0px;
}
Respuesta #2
No tiene nada que ver con Angular. Lo que estás buscando es un Polyfill para manejar algo que no está implementado en un navegador, esto no está directamente relacionado con jQuery o Angular, solo está relacionado con tu navegador.
El que enlazaste es bueno, solo agrégalo a tu proceso de compilación o a tu array de assets si estás usando Angular-CLI.
Puedes usarlo simplemente declarando la variable como cualquier elemento, añade esto al inicio de uno de tus archivos ts:
declare var Stickyfill: any;
