cvanuch Posted September 8, 2020 Share Posted September 8, 2020 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! Link to comment
tuanphan Posted September 9, 2020 Share Posted September 9, 2020 This require CSS + JavaScript. You need a Business Plan to do this. Which Plan do you use? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
cvanuch Posted September 9, 2020 Author Share Posted September 9, 2020 @tuanphan I have the Business Plan. Link to comment
cvanuch Posted September 13, 2020 Author Share Posted September 13, 2020 @tuanphan Could you assist me with this? I'm not sure where to start. Thanks! Link to comment
tuanphan Posted September 13, 2020 Share Posted September 13, 2020 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 Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
IXStudio Posted September 14, 2020 Share Posted September 14, 2020 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
cvanuch Posted September 14, 2020 Author Share Posted September 14, 2020 @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 Screen Recording 2020-09-13 at 10.51.21 PM.mov Link to comment
IXStudio Posted September 14, 2020 Share Posted September 14, 2020 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 comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.