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;

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

1 个答案: