Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Hide Header until Scrolling past certain point


cvanuch

Question

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 post
  • Answers 7
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Posted Images

7 answers to this question

Recommended Posts

  • 1

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 post
  • 0

@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 post
  • 0

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

Ninja Kit Extension: Upgrade your Squarespace website without coding.

YouTube Preview    -    FREE DOWNLOAD

Link to post

Create an account or sign in to comment

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


×
×
  • Create New...