Hide Header until Scrolling past certain point

Site URL: https://matey.app

Hi! I'm trying to figure out how to have the header on my homepage hidden until you scroll to the second section of the page ("Simple search. Advanced features.") where it will slide down and reveal itself. I also want it to slide up and disappear once scrolling back up to the first section at the top of the page. To clarify, I've attached two screenshots below. Also, I only want it to happen on the homepage. Thanks!

This require CSS + JavaScript. You need a Business Plan to do this.

Which Plan do you use?

@tuanphan I have the Business Plan.

@tuanphan Could you assist me with this? I'm not sure where to start. Thanks!

This requires a lot of time to test the code. I'm overloaded and haven't had time to test it out yet.

You can tag some other members.

Hi,

Insert this code in your Footer Code Injection.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('.header-announcement-bar-wrapper').css('display','none');
$(window).scroll(function() {
    var height = $(window).scrollTop();
    if(height  > 700) {
        $('.header-announcement-bar-wrapper').css('display','block');
    }
else{
$('.header-announcement-bar-wrapper').css('display','none');
}
});
});
</script>

If you need more customization. Feel free to contact me via DM for custom work!
Please use the like button if it helps you!

Best,
Leopold

@IXStudio Hi thank you so much for the code! It looks great, is there a way to have the nav bar slide down instead of statically appearing? Also, I noticed that the bottom line underneath the nav bar is visible at the very top of the screen. Is there a way to move it out of view? I've attached a screen recording of what I'm describing. Thanks again for your help!

I've implemented the code to a duplicate home screen here: https://matey.app/overview-1

You're welcome. It needs some CSS code to make transition and check it on the desktop and responsive view! So It can be done but if you like you can contact me via DM or Skype: LeopoldJobs. For custom coding.

Best,
Leopold