I have written following code in jquery to hide/show scrolltop button:
$(window).scroll(function () {
var scroll = $(window).scrollTop();
if (scroll >= 500) {
$('nav').addClass('ShowBtn');
} else {
$('nav').removeClass('HideBtn');
}
});
But I need to do same thing in Angular, How to do that ??
There are at least two ways to achieve this.
In the template, like mentioned by Adrien Brunelat, or the one I personally prefer:
In the component or directive directly, without needing to write your template.
class YourClass implements OnInit {
private requiredScrollPos: number = 300;
constructor(
@Inject('Window') private window: Window,
@Inject(DOCUMENT) private document: Document,
private renderer: Renderer2,
private hostElement: ElementRef
) {}
@HostListener('document:scroll')
public onScroll() {
let scrollPosition: number = this.window.scrollY || this.document.documentElement.scrollTop || this.document.body.scrollTop;
this.showHideButton(scrollPosition);
}
private showHideButton(scrollPosition: number) {
if (scrollPosition < this.requiredScrollPos) {
this.renderer.removeClass(this.hostElement.nativeElement, 'showButton');
} else {
this.renderer.addClass(this.hostElement.nativeElement, 'showButton');
}
}
}
Similar to the approach above (2.), you might just want to set the scrollposition to a variable and use it in the template with ngClass, ngStyle or className which you might want to have a look at. scotch.io/tutorials > ngclass-and-ngstyle
<a [className]="scrollposition < requiredScrollPos ? 'showBtn' : 'hideBtn'">The button</a>
<a [ngStyle]="{'showBtn' : (scrollposition > requiredScrollPos) }">The button</a>
You should bind with the scroll event of the element you're scrolling on:
<div (scroll)="checkScrollTop($event)">
<!-- Your div content -->
</div>
And then call a function in your Component:
checkScrollTop(scrollEvent: any) {
const scroll = scrollEvent.target.scrollTop;
// Do what you want with that.
}
Be carefull to declare your variable any and not MouseEvent as it should normally be since the typings for this element are incorrect or incomplete and don't include .target.scrollTop.
Please do this, $(window) will be replace by $window in angularjs and the way $("nav") is identified in jquery, simillar way of doing this in angular is via angular.element()
Please see the updated code:
<nav ng-app="app" ng-controller="appContr" id="nav">abc</nav>
controller
angular.module('app', []).controller('appContr', appContr)
function appContr($window){
angular.element($window).on("scroll", function(e) {
var scroll = angular.element($window).scrollTop();
if (scroll >= 50) {
angular.element(document.getElementById("nav")).addClass('ShowBtn');
} else {
angular.element(document.getElementById("nav")).removeClass('ShowBtn');
}
});
}
here is the codepen link: https://codepen.io/iamlalit/pen/jwGKbN
