scroll position css code example

Example 1: scroll position

$(window).scroll(function() {
	var $height = $(window).scrollTop();
  if($height > 50) {
		//do something
	} else {
		//do something
	}
});

Example 2: Scroll,Position

import { HostListener } from '@angular/core';

@ViewChild('curtain') divCurtain: ElementRef;

export class ComponentX {
    @HostListener('window:scroll', ['$event']) onScrollEvent($event) {
        console.log(window.pageYOffset);
        this.divCurtain.nativeElement.style.top = window.pageYOffset.toString().concat('px');
    }

    ngOnInit(): void { }
}

Example 3: based on scroll position and get data attribute javascript

<div class="imageWrap"(scroll) = "onScroll($event,imageEl)">
  <ul>
  <li #imageEl * ngFor="let data of images; let i = index"
  [attr.data-image-id] = "image.id" >
    <div><img src ="{{data.img}}" width = "500" height = "600" /> </div>
  </li>
  </ul>
  </div>

@HostListener('scroll', ['$event'])
onScroll(event: any, indexI ?) {
  let els = document.getElementsByTagName("li");
  let offsetHeight = event.target['offsetHeight'];
  let scrollTop = event.target['scrollTop'];
  let scrollHeight = event.target['scrollHeight'];
  this.getImageById(id);
}
getImageById(id){
  this.apiService.getimageData(id).subscribe(images => this.images = images);
}