typescript - Position: sticky polyfill för angular 2

Finns det några polyfills tillgängliga för Angular 2 position:sticky. Jag har kunnat hitta några få, men de flesta är baserade på jQuery, och det verkar inte finnas någon implementation tillgänglig för Angular 2:

https://github.com/wilddeer/stickyfill

Jag behöver veta exempel på användning med Angular 2,

för Javascript är det som följer:

var stickyElements = document.getElementsByClassName('sticky');

for (var i = stickyElements.length - 1; i >= 0; i--) {
    Stickyfill.add(stickyElements[i]);
}

Svar #1

Jag lade till det som en direktiv på Angular 1.4 och npm-paketet "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);
  }
}

Och i komponenten har jag:

<div class="top-bar-container stickyMenu" StickyPolyfill>

Glöm inte att inkludera sticky i CSS:

  .stickyMenu {
    position: -webkit-sticky;
    position: -moz-sticky;
    position: -o-sticky;
    position: -ms-sticky;
    position: sticky;
    top: 0px;       
  }

Svar #2

Det har inget att göra med Angular. Det du letar efter är en Polyfill för att hantera något som inte är implementerat i en webbläsare, detta är inte direkt kopplat till jQuery eller Angular, det är bara kopplat till din webbläsare.

Den du länkade till är bra, lägg bara till den i din byggprocess eller i din tillgångsarray om du använder Angular-CLI.

Du kan använda det bara genom att deklarera variabeln som vilket element som helst, lägg till detta i början av en av dina ts-filer:

    declare var Stickyfill: any;

Relaterade artiklar