Intersection Observer API

by Artem

HTML

<!-- https://developer.mozilla.org/ru/docs/Web/API/Intersection_Observer_API -->
<a href="#" target="_blank" id="hello">Hello</a>

CSS

body {
  position: relative;
  height: 900px;
}

#hello {
  position: absolute;
  bottom: 0;
}

JavaScript

'use strict';

var options = {
  // root: document.querySelector('body'),
  rootMargin: '0px',
  threshold: [0, 0.25, 0.5, 0.75, 1]
}
var callback = function(entries, observer) {
  console.log(entries, observer);
};

var observer = new IntersectionObserver(callback, options);

var target = document.querySelector('#hello');
observer.observe(target);