CSS 和 JQuery 在 IE 11 和 Firefox 的 Angular2 HostListener 中不起作用答案

【问题标题】：CSS and JQuery not working in Angular2 HostListener with IE 11 and FirefoxCSS 和 JQuery 在 IE 11 和 Firefox 的 Angular2 HostListener 中不起作用
【发布时间】：2017-04-07 02:32:20
【问题描述】：

引导导航标题上的动画徽标不适用于 IE 11 或 Firefox，但在 Chrome 和 Opera 中一切正常。

这是我的组件类中的监听器：

@HostListener("window:scroll", [])
onWindowScroll() {
    let number = this.document.body.scrollTop;
if (number > 50) {
    $("#logobottom_container").hide('shrink');
    $("#logotop").fadeOut('slow').css({ "display":"none" });
    $("#logo").fadeIn('slow').css({ "display": "block" });
} else if (number < 54)  {
    $("#logobottom_container").show('slow');
    $("#logotop").fadeIn('slow').css({ "display": "block" });
    $("#logo").fadeOut('slow').css({ "display": "none" });
}
}

这是 CSS：

#logo {
  float: left;
  width: 140px;
  margin: 0px 60px 0px 60px;
  display: none;
}

#logotop {
  float:left; 
  width: 150px;
  margin: 12px 55px 0px 55px;
  display: block;
}

#logobottom_container {
  width: 1080px; 
  margin: 0 auto;
  background: #fff;
  display: block;
  position: absolute;
  left: 0px;
  top: 53px;
  z-index: -1;
}

这里是html：

<a routerLink="/company" routerLinkActive="active">
  <img src="../assets/img/logo.png" alt="" id="logo">
  <img src="../assets/img/logotop.png" alt="" id="logotop">
</a>

感谢您对该问题的任何见解。 :)

【问题讨论】：

标签： jquery css angular

【解决方案1】：

问题不在于 jquery 或 css，而在于我获得滚动像素数的方式。

这不是跨浏览器兼容的：让 number = this.document.body.scrollTop;

改用这个： let number = window.pageYOffset;

【讨论】：