Угловое липкое всплывающее окно на свитке, не скрывающееся при инициализации - PullRequest
Новая
       19

Угловое липкое всплывающее окно на свитке, не скрывающееся при инициализации

0 голосов
/ 04 ноября 2019

Я создал угловой компонент, который при прокрутке вниз страницы должен иметь заглядывающую вкладку бу, которая появляется в боковой части окна. При нажатии на эту вкладку она будет переключать панель с кнопкой на ней, которая после нажатия кнопки панели снова прокручивается до верхней части страницы, делая вкладку исчезающей.

Изначально эта кнопка не должна отображаться, покавверху страницы и отображается только при прокрутке ниже смещения 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, #e3372f 0%, #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>
...