Sticky header fade on scroll

[mrtwanstall]

mrtwanstall

November 25, 2019 at 9:49 am

I’m trying to add a bit of custom code to get the sticky header set to fade out/in on scrolling. The idea is that is sticky when starting to scroll but then fades out when scrolling down and back in when scrolling up.

I have the following code in theme header scripts

<script type=”text/javascript”>
$(‘window’).scroll(function(){
if($(this).scrollTop() > 300) $(‘#kad-header-menu’).fadeOut(‘slow’);
if($(this).scrollTop() < 300) $(‘#kad-header-menu’).fadeIn(‘slow’);
});
</script>

It’s just not working for love nor money and wonder if the header is set as sticky it’s overriding the js.

Could you point me in the right direction please?
Thank you

jquery, sticky header, fade on scroll