How to make component disappear when scroll down in Angular?

Question

I am looking for a simple way to make a different header appear when the normal one is scrolled down. I have been looking for many solution but they're all involving long code..

So here is the solution I found but that isn't working since y doesn't implement itself..

Here is the 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"
        }
      };

    }

The HTML

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

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

And the .css

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

This apparently is supposed to work and looks simple but it doesn't work for me..

EDIT : If you have a simpler way I am also open, the solution isn't mainly to correct this one.

EDIT 2 : Still no answer, if anyone have an idea, or if there is a simpler solution, like if (position !=0) { y = 1 } else { y = 0 } and i'd add y in some ngIf in the HTML... ?

EDIT 3 : I finally found a solution, here is my code if someone has the same problem :

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

Easier than long listener

Thank you very much for your help in advance !

can you provide your full html template to see which element event you listening to — Tiago Silva
– Tiago Silva, Commented Oct 18, 2019 at 7:44
I guess I only have this in the .ts : window.addEventListener("scroll", this.myScrollFunc); ... Thought it was enough for the listener — Skimar
– Skimar, Commented Oct 18, 2019 at 7:50

Skimar · Accepted Answer · 2019-10-21 08:55:01Z

4

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

Easier than long listener

answered Oct 21, 2019 at 8:55

Skimar

1292 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

upinder kumar · Accepted Answer · 2019-10-18 07:51:13Z

1

I am updated your code try this.

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"
        }
}

}

answered Oct 18, 2019 at 7:51

upinder kumar

8376 silver badges8 bronze badges

1 Comment

Skimar Over a year ago

Thank you for your answer, I'll work on the *ngIf solution and see if it works first !

Tiago Silva · Accepted Answer · 2019-10-18 09:37:38Z

1

If you are using angular and want to hide certain elements you should just use *ngIF which will render or not the element and there's no need to apply css to hide it, and since you are only showing 1 element or the other you can just bind both to the same variable but with inverse condition.

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

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

And in your component all left to do is turn scrolled to on if it get past your desired height.

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

Edit: I added the HostListener from upinder kumar answer since that's the proper way to register to events in angular.

Edit 2 : I in the past have implemented something similar to this but didn't used a hardcoded px (in your case you using 150 px ) size to scroll event but yet instead I calculated that my header would change after 10% of the scroll has been moved with the following expression :

this.scrolled = $event.srcElement.scrollTop / $event.srcElement.scrollHeight > 0.1 ;

edited Oct 18, 2019 at 9:37

answered Oct 18, 2019 at 7:51

Tiago Silva

2,34917 silver badges20 bronze badges

14 Comments

Skimar Over a year ago

Oh thank you I didn't think about the *ngIf solution here, I still have some problems, I try to fix them and get back to you if this still doesn't work !

Skimar Over a year ago

I think the listener doesn't work, nothing happens when I scroll down..

Tiago Silva Over a year ago

@Skimar Yes then you should use the upinder kumar approach with the ngIf approach , instead applying different css

Skimar Over a year ago

without the ngif you mean ? Ok I'll try his solution then

Tiago Silva Over a year ago

@Skimar No, you want to use the ngIf, because it still makes no sense to apply css to hide elements, plus you don't want to do it via the component if that would be the case you would apply via a ngClass. Just combine both solutions i will edit mine to include all.

|

rick · Accepted Answer · 2021-06-17 10:27:11Z

Unfortunately, using @HostListener('window:scroll') did not work for me. For moderns browsers, you can use the wheel event (WheelEvent) instead.

I get the scroll for the entire app and share among the components, so that I can do whatever I want with the event.

share.service.ts

  public isScrolledUp = new BehaviorSubject<boolean>(null);

  public addScroll(isScroll: boolean) {
    this.isScrolledUp.next(isScroll);
  }

app.component.ts

  constructor(private sharedS: SharedService){}

  public onScroll(event: WheelEvent) {
    // Move Up (negative)
    // Move Down (positive)
    this.sharedS.addScroll(event.deltaY > 0);
  }

app.component.html

<div (wheel)="onScroll($event)">
    <!--Here goes your components-->
    <router-outlet></router-outlet>
</div>

Then, any component you like just import the SharedService and subscribe the property isScrolledUp.

any.component.ts

  private sub: Subscription;
  public isScrollUp: boolean; // you can do whatever you want. Ex: hide some buttons
  constructor(private sharedS: SharedService){}

  ngOnInit(): void {
    this.sub = this.sharedS.isScrolledUp.subscribe((res) => this.isScrollUp = res);
  }

any.component.html

<footer *ngIf="!isScrollUp"></footer>
<button *ngIf="isScrollUp"></button>

Collectives™ on Stack Overflow

How to make component disappear when scroll down in Angular?

4 Answers 4

Comments

1 Comment

14 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

14 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related