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.getBoundingClientRect().top;
  // get the current scroll
  var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
 
  // scroll when the focused element is under the sticky element
  if( focusTop < headerHeight ){
    document.documentElement.scrollTop = document.body.scrollTop = scrollTop - headerHeight;
  }
}

document.body.addEventListener( 'focus', handleFocus, true );