Cacher is the code snippet organizer for pro developers

.wrap
  .monitor data-intersection-monitor=""
  .content data-intersection-content=""
    | content1
  .content data-intersection-content=""
    | content2
  .content data-intersection-content=""
    | content3
  .content data-intersection-content=""
    | content4
  .content data-intersection-content=""
    | content5
  .content data-intersection-content=""
    | content6
  .content data-intersection-content=""
    | content7
  .content data-intersection-content=""
    | content8
  .content data-intersection-content=""
    | content9
  .content data-intersection-content=""
    | content10

const ELEM_ATTRS = (() => {
  const PREIFX = 'data-intersection';

  return Object.freeze({
    PREIFX,
    MONITOR: `${PREIFX}-monitor`,
    CONTENT: `${PREIFX}-content`
  });
})();

const entryHandle = monitor => ({ isIntersecting, target }) => {
  if (!isIntersecting) return;

  monitor.innerHTML   = target.innerHTML;
  monitor.style.color = getComputedStyle(target).backgroundColor;
};

const observer = new IntersectionObserver(
  entries => entries.forEach(entryHandle(document.querySelector(`[${ELEM_ATTRS.MONITOR}]`))),
  {
    root: null
  }
);

document.addEventListener('DOMContentLoaded', () =>
  [...document.querySelectorAll(`[${ELEM_ATTRS.CONTENT}`)].forEach(
    content => observer.observe(content)
  )
);

.wrap
  text-align: center
  color: white
  
  &:before
    display: block
    content: ""
    height: 50px

.monitor
  background: black
  position: fixed
  top: 0
  left: 0
  width: 100%
  height: 50px
  line-height: 50px

.content
  height: calc(100vh - 49px)
  line-height: calc(100vh - 49px)

  &:nth-child(3n+1)
    background: tomato
  &:nth-child(3n+2)
    background: gray
  &:nth-child(3n+3)
    background: orange