Как заставить компонент исчезнуть при прокрутке вниз в Angular? - PullRequest
Новая
       11

Как заставить компонент исчезнуть при прокрутке вниз в Angular?

1 голос
/ 18 октября 2019

Я ищу простой способ отображения другого заголовка при прокрутке обычного заголовка. Я искал много решений, но все они связаны с длинным кодом ..

Итак, вот решение, которое я нашел, но оно не работает, так как y не реализует себя ..

Вот TypeScript 

import { Component, OnInit, HostListener } from '@angular/core';`

...

export class HeaderComponent implements OnInit{

    y = window.scrollY;

    myID = document.getElementById("header");

    myID2 = document.getElementById("header2");

ngOnInit() {
        this.myScrollFunc();
        window.addEventListener("scroll", this.myScrollFunc);
      }

      myScrollFunc() {
        if (this.y >= 150) {
          this.myID2.className = "bottomMenu hide"
          this.myID.className = "bottomMenu show"
        } else {
          this.myID2.className = "bottomMenu show"
          this.myID.className = "bottomMenu hide"
        }
      };

    }

HTML 

<div id="header" class="bottomMenu show"> ... </div>

<div id="header2" class="bottomMenu hide"> ... </div>

И .css 

.hide {
  opacity: 0;
  left: -100%;
}
.show {
  opacity: 1;
  left: 0;
}

Это, очевидно, должно работать и выглядит просто, но это нене работает для меня ..

РЕДАКТИРОВАТЬ: Если у вас есть более простой способ, я также открыт, решение не в основном исправить это.

РЕДАКТИРОВАТЬ 2: Все еще нет ответа,если у кого-то есть идея, или если есть более простое решение, например if (position! = 0) {y = 1} else {y = 0} и я бы добавил y в некоторый ngIf в HTML ...?

РЕДАКТИРОВАТЬ 3: Я наконец нашел решение, вот мой код, если у кого-то есть такая же проблема:

HTML 

<div id="header" *ngIf="scrolled == 0"> ... </div>
<div id="header2" *ngIf="scrolled == 1"> ... </div>

TypeScript 

export class HeaderComponent implements OnInit{

  scrolled = 0;

  @HostListener('window:scroll', ['$event'])
  onWindowScroll($event) {
    const numb = window.scrollY;
    if (numb >= 50){
      this.scrolled = 1;
    }
    else {
      this.scrolled = 0;
    }
  }
}

Проще, чем длинный слушатель

Большое спасибо за вашу помощь заранее!

Ответы [ 3 ]

1 голос
/ 18 октября 2019

Если вы используете angular и хотите скрыть определенные элементы, вы должны просто использовать *ngIF, который будет отображать или не отображать элемент, и нет необходимости применять css, чтобы скрыть его, и поскольку вы показываете только 1 элемент или другойВы можете просто связать обе переменные с одной и той же переменной, но с обратным условием. 

<div id="header" *ngIf="!scrolled" class="bottomMenu"> ... </div>

<div id="header2" *ngIf="scrolled" class="bottomMenu"> ... </div>

И в вашем компоненте все, что нужно сделать, это включить прокрутку, если она превышает желаемую высоту. 

import { Component, OnInit, HostListener } from '@angular/core';`

...

export class HeaderComponent implements OnInit{

    scrolled = false;

    @HostListener('window:scroll', ['$event'])
    onWindowScroll($event) {
        this.scrolled = $event.srcElement.scrollTop >= 150;
    }
}

Редактировать: я добавил HostListener из ответа upinder kumar, поскольку это правильный способ регистрации в событиях в угловом формате.

Редактировать 2: В прошлом я реализовывал нечто подобноено я не использовал жестко заданный размер px (в вашем случае вы используете 150 px) для прокрутки события, но вместо этого я рассчитал, что мой заголовок изменится после перемещения 10% прокрутки со следующим выражением: 

this.scrolled = $event.srcElement.scrollTop / $event.srcElement.scrollHeight > 0.1 ;
1 голос
/ 18 октября 2019

Я обновил ваш код, попробуйте это. 

import { Component, OnInit, HostListener } from '@angular/core';`

...

export class HeaderComponent implements OnInit{

    y = window.scrollY;
    myID = document.getElementById("header");
    myID2 = document.getElementById("header2");

ngOnInit() {}

@HostListener('window:scroll', ['$event'])
onWindowScroll($event) {
          if (this.y >= 150) {
          this.myID2.className = "bottomMenu hide"
          this.myID.className = "bottomMenu show"
        } else {
          this.myID2.className = "bottomMenu show"
          this.myID.className = "bottomMenu hide"
        }
}

}
0 голосов
/ 21 октября 2019

HTML 

<div id="header" *ngIf="scrolled == 0"> ... </div>
<div id="header2" *ngIf="scrolled == 1"> ... </div>

TypeScript 

export class HeaderComponent implements OnInit{

  scrolled = 0;

  @HostListener('window:scroll', ['$event'])
  onWindowScroll($event) {
    const numb = window.scrollY;
    if (numb >= 50){
      this.scrolled = 1;
    }
    else {
      this.scrolled = 0;
    }
  }
}

Проще, чем длинный слушатель

...