Using IntersectionObserver to track current and previously focused DOM elements. Demo: https://codesandbox.io/s/o599joo75z

currently-focused-element.js

// polyfill
import 'intersection-observer'

const setupIntersectionObserver = elements => {
  // keep track of the current focused section as well as the previous.
  // when the user scrolls up/reverse, we trigger the previous 
  let current, previous

  const observer = new IntersectionObserver(
    entries => {
      entries.forEach(entry => {
        const id = entry.target.getAttribute('id')

        if (entry.isIntersecting) {
          if (current !== id) {
            previous = current
            current = id
            // a function to toggle a css class for the focused link 
            updateCurrentActiveLink(current)
          }
        } else if (current === id && previous) {
            current = previous
            updateCurrentActiveLink(current)
          }
        }
      })
    },
    {
      // trigger when 25% of the element is in the viewport
      threshold: [0.25],
    }
  )
  
  elements.forEach(el => observer.observe(el))
  
  return observer
}