Are there any polyfill available for angular 2 position:sticky. I have been able to find a few, but most of them are jquery based, there seem to be no implementation available for angular 2:
https://github.com/wilddeer/stickyfill
I need to know the sample usage with angular 2,
for Javascript it is as follows:
var stickyElements = document.getElementsByClassName('sticky');
for (var i = stickyElements.length - 1; i >= 0; i--) {
Stickyfill.add(stickyElements[i]);
}
I added it as a directive on angular 1.4 and npm package "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);
}
}
And in the component I have:
<div class="top-bar-container stickyMenu" StickyPolyfill>
Don't forget to include sticky in CSS:
.stickyMenu {
position: -webkit-sticky;
position: -moz-sticky;
position: -o-sticky;
position: -ms-sticky;
position: sticky;
top: 0px;
}
It has nothing to do with Angular. What you are looking for is a Polyfill to handle something not implemented in a browser, this is not directly linked with jQuery or Angular, it's only linked to your browser.
The one you linked is good, just add it to your build process or to your assets array if you are using Angular-CLI.
You can use it just by declaring the variable as any element, add this to the start of one of your ts file:
declare var Stickyfill: any;