Internet Explorer 11 및 Firefox에서 Angular2 HostListener에서 CSS 및 JQuery가 작동하지 않음

Question

부트 스트랩 탐색 로고에 애니메이션 로고가 IE 11 또는 Firefox에서 작동하지 않지만 Chrome 및 Opera에서 모두 잘 작동합니다. html로 여기

#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; 
} 

됩니다 :

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

문제에 어떤 통찰력을 감사합니다 여기에

@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입니다 : 여기

내 구성 요소 클래스의 청취자입니다 . :)

Answer 1

문제는 jquery 또는 CSS가 아니라 픽셀 수를 스크롤하는 방식과 관련이 있습니다.

이것은 크로스 브라우저 호환이 아닙니다. let number = this.document.body.scrollTop;

대신 다음을 사용하십시오. let number = window.pageYOffset;