Hero Height Scroll Effect

HTML

<h2>
This is a Title
</h2>
<div class="hero"></div>
<h2>
This is a heading below the hero
</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque bibendum rhoncus arcu quis consequat. Nunc dapibus sed risus a dictum. Sed eu justo malesuada, suscipit sapien quis, varius quam. Curabitur quis pretium sapien. Fusce gravida, leo sit amet placerat vehicula, sapien dui consectetur diam, ut luctus eros tortor eu velit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec sodales nisi sed sem viverra, sed ornare diam eleifend. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent eu diam aliquam, mollis mi sit amet, iaculis nunc. Sed lacus tortor, vehicula eu augue sit amet, lacinia efficitur neque. Integer purus turpis, placerat at dictum quis, vestibulum sit amet urna. Sed facilisis mi consequat, sollicitudin ipsum eget, consequat risus. Vivamus feugiat metus dictum libero sodales iaculis. Suspendisse nunc ante, tincidunt nec ligula vel, ultricies facilisis eros. Suspendisse purus leo, aliquam tempor euismod vel, vulputate non lectus. Cras vel diam augue.</p>

<p>Morbi et sodales libero. Aliquam dui quam, mattis quis lacus nec, vehicula lacinia dolor. Nullam a dignissim elit. Proin est sem, tempus ac enim eu, consectetur viverra quam. Etiam mauris nisl, auctor et tempus quis, vulputate quis tellus. Fusce dictum, nunc et euismod dignissim, ante ligula vestibulum ante, a ultricies lacus elit ut purus. Nullam rutrum nisl non ante consectetur sollicitudin.</p>

<p>Nunc in risus tincidunt, bibendum arcu at, pellentesque metus. Ut rutrum lacus lacus, et varius urna fermentum ac. Donec non finibus augue, non sagittis dui. Nunc at justo ut sem malesuada fermentum et sit amet orci. Sed viverra est arcu, sed tempor diam elementum sed. In vestibulum nisl et nulla mattis laoreet. Proin malesuada sapien augue, non volutpat ante vestibulum eu. Cras egestas venenatis...

CSS

.hero {
    background-image: url(https://mediaron.com/wp-content/uploads/2019/05/becca-tapert-1561341-unsplash.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: scroll;
    background-size: cover;
    min-height: 800px;
    width: 100%;
}

JavaScript

var hero_offset = $( '.hero' ).offset().top;
var min_height = $( '.hero' ).css( 'min-height' ).replace('px', '' );
window.addEventListener('scroll', function( e ) {
  if ( window.pageYOffset < hero_offset ) return;
  var new_height = Math.ceil( min_height - ( window.pageYOffset - hero_offset ) );
  if( new_height < 0 ) return;
  $( '.hero' ).css( 'min-height', new_height + 'px' );
}, false);