Question

我有一个页眉组件，其样式我想根据窗口滚动值进行更改。如果滚动值大于某个值，我想添加一个类。我在jquery中有代码。

$(window).scroll(function() {
    if ($(document).scrollTop() > 150) {
        $('.navbar').addClass('shrink');
    } else {
        $('.navbar').removeClass('shrink'); 
    }
});

http://bootsnipp.com/snippets/z1Dx8

直到现在，我能够获得滚动值

renderer.listenGlobal('window', 'scroll', (event) => {
      const number = this.document.body.scrollTop;
      if (number > 150) {
        // add logic
      } else {
        // remove logic
      }
    });

我想我不能使用viewchild，因为我想在每个html元素中添加/删除shrink，就像上面的jquery代码一样。

Answer 1

您可以使用 angular2 的class binding，在您的代码中将布尔属性设置为true或false，具体取决于滚动值，如下所示：

renderer.listenGlobal('window', 'scroll', (event) => {
  let number = this.document.body.scrollTop;

  this.addShrinkClass = number > 150;
});

在.navbar标记上使用[class.shrink]绑定，如下所示：

<div class="navbar" [class.shrink]="addShrinkClass"></div>

在角度2中添加和删除类选择器

1 个答案: