Detect and change the scroll position when a focused element is under a sticky element

sticky-focus.js

// sticky element
var stickyHeader = document.querySelector( '.intro-banner' );
 
function handleFocus( e ){
  // don't try to change the scroll if the focused element is in the sticky element
  if( stickyHeader.contains( e.target )){
    return;
  }

  // quick & dirty client height on each focus
  // get the sticky element's height (can be done on mediaquery change instead of each time)
  var headerHeight = stickyHeader.clientHeight;
  // get the screen position of the focused element
  var focusTop = e.target.offsetTop;
  // get the current scroll
  var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
 
  // scroll when the focused element is under the sticky element
  if( focusTop === scrollTop || ( focusTop > scrollTop && focusTop < (scrollTop + headerHeight) ) ){
    document.documentElement.scrollTop = document.body.scrollTop = focusTop - headerHeight;
  } 
}
 
document.body.addEventListener( 'focus', handleFocus, true );