我有一个页面标题组件,我想根据窗口滚动值更改其样式。如果滚动值大于某个值,我想添加一个类。我有 jquery 中的代码。
$(window).scroll(function() {
if ($(document).scrollTop() > 150) {
$('.navbar').addClass('shrink');
} else {
$('.navbar').removeClass('shrink');
}
});
到目前为止,我已经能够获取滚动值了
renderer.listenGlobal('window', 'scroll', (event) => {
const number = this.document.body.scrollTop;
if (number > 150) {
// add logic
} else {
// remove logic
}
});
我想我不能使用viewchild,因为我想像上面的jquery代码一样添加/删除每个html元素的收缩。
最佳答案
您可以使用angular2的class binding ,在代码中根据滚动值将 bool 属性设置为 true
或 false
,如下所示:
renderer.listenGlobal('window', 'scroll', (event) => {
let number = this.document.body.scrollTop;
this.addShrinkClass = number > 150;
});
并在您的 .navbar
标记上使用 [class.shrink]
绑定(bind),如下所示:
<div class="navbar" [class.shrink]="addShrinkClass"></div>
关于javascript - 在 Angular 2 中添加和删除类选择器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42309070/