Jump to content

Homepage/nav scroll feature

Recommended Posts

Hi! I am curious how I can achieve the feature/functionality of this website: https://us.sundaysupply.co/ 

I'm unsure how to search for this or what it is called. I would like the initial homepage loading screen to be a unique section and the the homepage appear with the nav via a scroll. You can see it best on that website I shared on desktop. Thanks!

Link to comment
  • Replies 12
  • Views 277
  • Created
  • Last Reply

Top Posters In This Topic

@MelDav Hi! We can create this feature with custom code. First, create your homepage like a regular page with navigation at the top. Additionally, create the first section similar to the page you shared in your post. Then, with custom code, we can ensure the first section appears first, and the rest of the page, along with the navigation, appears once you scroll. If you're done creating your homepage, share your site URL so I can write the custom code specific to your site. Thanks!

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer

 Did you find my contribution helpful? Buy me a coffee?

Link to comment

@MelDav Apologies, I saw your reply earlier but somehow forgot to respond. The following code solution achieves what you described in your post.

To move the navigation below the first section only on homepage, first add this code under Website > Pages > Website Tools > Custom CSS:

@media only screen and (min-width: 1025px) {
  #collection-666dd2cd61e499399f5fe9d8 .page-section:first-child {
    height: 100vh !important;
  }
  #collection-666dd2cd61e499399f5fe9d8:not(.sqs-edit-mode,.is-expanded) #header {
    position: sticky !important;
    z-index: 10000;
    top: 0;
    display: none;
  }
  #collection-666dd2cd61e499399f5fe9d8:not(.sqs-edit-mode) main .page-section:first-child {
    min-height: calc(100vh - 145px) !important;
  }
  #collection-666dd2cd61e499399f5fe9d8:not(.sqs-edit-mode) main .page-section:first-child + #header {
    display: block;
  }
}

Then add the next block of code under Website > Pages > Website Tools > Code Injection > Header:

<script> 
document.addEventListener("DOMContentLoaded",function() {
  if (window.self === window.top) {
    const header = document.getElementById('header');
    const firstSection = document.querySelector('.homepage .page-section:first-child');
    firstSection.after(header);
}
});
</script>

Let me know how it goes and if further adjustments are necessary. Thank you!

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer

 Did you find my contribution helpful? Buy me a coffee?

Link to comment

@Lesum No problem! Thank you. I added those codes and it's not quite giving the same effect. There's some overlap and it feels a little disjointed and not smooth. The nav seems to not floating. Can you take a look? Thanks!

Link to comment

@MelDav Hi! The code is replicating the feature shown on the example website you shared.

You need to make some adjustments to your first section. The issue is not with the code. In your first section, you added the image using an image block. Instead, it should be added as a section background to avoid overlap. First, add the image as a section background.

Secondly, on the example website, the navigation bar becomes fixed after scrolling past the first section. I've written the code to function the same way, but it can be adjusted to make the navigation bar float.

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer

 Did you find my contribution helpful? Buy me a coffee?

Link to comment

@MelDav I do think it works better in terms of user experience if the nav stays fixed. However, please do let me know if you want the nav to float after scrolling past the first section. I can adjust the code.

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer

 Did you find my contribution helpful? Buy me a coffee?

Link to comment

@Lesum I totally agree! I have it set to fixed on my end, is that what you're seeing on yours? I was also curious if the sections would be able to have the overlapping feel that is in the example site I shared. For example, when you scroll past the first section on the homepage it feels like the next section is layering on top of the hero image vs just scrolling down and then when you reverse back UP the page it has that same layered effect. Let me know if you need more clarity on what I'm describing. Thank you!

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.