Búsqueda de sitios web

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;

Artículos relacionados