css when user scroll down code example

Example 1: scroll down style

<script type="text/javascript">
$window.scrollTop(function(){ 

var a = 112;
var pos = $window.scrollTop();
if(pos > a) {
    $("menu").css({
                position: 'fixed'
            });
}
else {
    $("menu").css({
                position: 'absolute',
                top:'600px'
            });
}
});
</script>

Example 2: 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);
}