我创建了一个Angular Component，当向下滚动页面时，应该在窗口的侧面看到一个boo选项卡。单击此选项卡后，它将切换带有按钮的面板，单击该面板按钮后，再次滚动到页面顶部，从而使该选项卡消失。

最初，该粘滞按钮不应该在页面顶部显示，而仅在滚动到窗口的Y偏移以下时显示，但是尽管有一个类可以隐藏按钮和面板，但是它在初始化时会忽略我的css类。

似乎发生的事情是我的班级：“ hide-btn”在初始化时被忽略，结果，粘性弹出窗口显示在页面顶部。向下滚动并返回页面顶部后，似乎只能激活“ hide-btn”。

我担心实际的问题是此组件所在的位置。当前位于应用根组件中。

这是我的全部内容：

sticky-popup.component.html

<div class="hide-btn" [ngClass]="{'show-btn': show}" [classname]="wasClicked ? 'sticky-show': 'sticky-hide'">

<div class="popup-wrap">
  <div class="popup-header">
      <a (click)="togglePopupContent()"><p class="sticky-popup__title">open/close side panel</p></a>
  </div>
  <div class="popup-content">
    <p>title</p>
    <button class="sticky-popup-btn" (click)="toTopScroll()">scroll to top</button>
  </div>
</div>

sticky-popup.component.scss

.hide-btn {
    opacity: 0;
    right:0;
}

.sticky-show {
    position: absolute;
    top: 20%;
    height: 50px;
    position: fixed;
    transition: all .5s;
    z-index: 1070;
    right: 0px!important;
}

.sticky-hide {
    position: absolute;
    top: 20%;
    height: 50px;
    position: fixed;
    transition: all .5s;
    z-index: 1070;
    right: -226px;
}

.sticky-popup__title{
    cursor: pointer;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    background: linear-gradient(to right,#e3372f 0%,#e67d28 100%);
    border-radius: 5px;
    padding: 10px;
    color: white;
    white-space: nowrap;
    width: 180px;
}

.popup-header {
    margin-top: 56%;
    float: left;
    height: 160px;
    border-radius: 4px 0 0 4px;
    padding: 0px;
    margin-right: -63px;
}

.popup-content {
    overflow-x: hidden;
    overflow-y: auto;
    height: 400px;
    background-color: #f7f7f7;
    border: 1px solid hsl(0,0%,92%);
    border-radius: 25px;
    padding: 20px;
}

.show-btn{
    opacity: 1;
    right: -226px;
}

.sticky-popup-btn {
    background: linear-gradient(to right,#e67d28 100%);
    border-radius: 25px;
    padding: 10px;
    color: white;
}

sticky-popup.component.ts

import { Component,OnInit,Inject,HostListener } from '@angular/core';
import { activatedRoute,Router } from '@angular/router';
import { DOCUMENT } from '@angular/platform-browser';

@Component({
  selector: 'app-sticky-popup',templateUrl: './sticky-popup.component.html',styleUrls: ['./sticky-popup.component.scss']
})
export class StickyPopupComponent implements OnInit {

  public show: boolean;
  public wasClicked: boolean;

  constructor(
      @Inject(DOCUMENT) private document: any,private route: activatedRoute,private router: Router
  ) {
      this.show = false;
      this.wasClicked = false;
  }

  ngOnInit() {}

  @HostListener('window:scroll',[])
  public onWindowScroll() {
      const scroll = window.pageYOffset || document.documentElement.scrollTop;
      const height = this.document.body.offsetHeight;

      this.show = scroll > height;
  }

  public toTopScroll() {
      let i = this.document.documentElement.scrollTop || this.document.body.scrollTop || 0;
      const int = setInterval(function() {
          window.scrollTo(0,i -= 100);
          if (i <= 0) {
              clearInterval(int);
          }
      },15);
  }

  togglePopupContent() {
    this.wasClicked= !this.wasClicked;
  }
}

app.component.html

<div class="main-content">
    <router-outlet></router-outlet>
</div>
<app-sticky-popup></app-sticky-popup>