Javascript for Header help

site: https://grouper-azalea-byr2.squarespace.com/

password: lara

Hi! 

I am using a javascript code in my footer code injection area that was given to me by a member here on the forum. However, I am having a tiny issue with it but haven't heard back from the OG member, so starting a new thread in hopes of solving this for my client. My request was to: hide the site title of the first page only, first section only (site title appearing after scrolling past the first section). The code that was given to me works GREAT. However, the code does this for every page of the site, when I want it active only on the homepage. Can someone help me make this happen? Code down below: 

<script>
const logo = document.getElementById('site-title'); // get reference to sitelogo element
const landingSection = document.querySelector('#page #sections section:first-of-type'); 

const observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if (entry.target === landingSection) {
      if (!entry.isIntersecting && entry.intersectionRatio === 0) {
        logo.classList.remove('hidden'); 
      } else {
        logo.classList.add('hidden'); 
      }
    }
  });
});

observer.observe(firstSection); 
</script>

<style>
  .hidden {
    visibility: hidden;
  }
</style>

You should be able to do this by taking this out of the Code Injection area, and putting it in the home page code injection 🙂 

Hi @mbockmaster thank you for your speedy reply! I just tried this (makes sense!). Deleted it from the footer, and moved it to the code injection area on my home page- but didn't work at all 😭 Dang!

Hi @kaydotjpg, shoot! I'm not super fluent with js but have been doing a few similar customizations on my client site. I was hopeful that would work for you! Fingers crossed that someone else will be able to help!

A few days ago there was a similar question, but for logo. I have posted the code there, you can try searching on the Forum. If you still can't find it, let me know, I can give new code

@tuanphan Could you please provide that code (plus where to insert it)? Could not find the pervious question you answered, thank you ❤️

site: https://grouper-azalea-byr2.squarespace.com/

password: lara

Hi @tuanphan checking in on this again...... hoping you can help 🙏

On 5/3/2023 at 6:49 PM, kaydotjpg said:

The code that was given to me works GREAT. However, the code does this for every page of the site, when I want it active only on the homepage.

The code is missing a section that checks if the page has loaded, which is why it didn’t work when you tried it in the per-page header injection. It will load too early. You could move it to a Code Block instead, placed at the very bottom of the homepage, to give the content time to load.

Alternatively, you could prefix the selectors in the querySelector method to include the .homepage class. This would ensure it only works when the class is included.