Script is working only in Customize mode

Hello,

I would like to ask you for help/advice.
I finally have found the script for Page-headline to fade on scroll.

The problem is that it works only in customize mode, not in live page ( it is looking like it is running properly ).
I tried to purge cache in WordPress but nothing has happened.
I don´t have any cache cleaning plugin.

The script is in element - hook - after_header

<script>
var header = $('.page-hero h1');
var range = 200;

$(window).on('scroll', function () {

var scrollTop = $(this).scrollTop(),
height = header.outerHeight(),
offset = height,
calc = 1 - (scrollTop - offset + range) / range;

header.css({ 'opacity': calc });

if (calc > '1') {
header.css({ 'opacity': 1 });
} else if ( calc < '0' ) {
header.css({ 'opacity': 0 });
}

})
</script>

Thank you very much for any reply :)