Jump to content

Hide Header until Scrolling past certain point

Recommended Posts

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!

Screen Shot 2020-09-08 at 3.28.28 PM.png

Screen Shot 2020-09-08 at 3.28.55 PM.png

Link to comment
  • Replies 7
  • Created
  • Last Reply

Top Posters In This Topic

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.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

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

Ninja Kit Extension: Upgrade your Squarespace website without coding.

YouTube Preview    -    FREE DOWNLOAD

Link to comment

@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

Edited by cvanuch
Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.