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
  • Views 3k
  • Created
  • Last Reply

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

Link to comment

Archived

This topic is now archived and is closed to further replies.


×
×
  • 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.