CSS和JQuery不能在IE 11和Firefox的Angular2 HostListener中工作

Question

引导程序导航标题上的动画图标不适用于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> 

欣赏任何洞察问题。 :)

Answer 1

问题不是与jQuery或CSS，但与我得到的像素数滚动。

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

改为使用： let number = window.pageYOffset;