Fade Logo on Scroll

Description

• fade logo to another logo on scroll
• buy me a coffee

#1. Install Code

#1.1. You can use this code to Code Injection > Footer

• If you use Personal/Basic Plan and your plan doesn’t support Injection, you can see #3.1

<!-- 08.26c24v5 Fade Logo on Scroll -->
<script>
window.FadeLogoOnScrollOptions = {
  applyTo: '#header .header-title-logo img',
  secondLogoImageUrl: 'https://images.squarespace-cdn.com/content/v1/5ec321c2af33de48734cc929/1757433848909-XZPDGGR0TIS9XJQ7KT2V/imgg-demo-iGikAGoV.png?format=500w',
  scrollThreshold: 80,
  fadeDuration: 500
};
</script>
<script src="https://code.beaverhero.com/header/0826c24v5fadelogoscroll.js"></script>

#1.2. Update second logo url here

#1.3. If you need to tweak more you can use this AI Assistant (designed for Squarespace sites)

#2. Customize

nothing now

#3. Other

#3.1. If you use Personal/Basic Plan and your plan doesn’t support Injection, you can edit Site Footer > Add a Markdown Block

Add this code into Markdown

<script>
window.FadeLogoOnScrollOptions = {
  applyTo: '#header .header-title-logo img',
  secondLogoImageUrl: 'https://images.squarespace-cdn.com/content/v1/5ec321c2af33de48734cc929/1757433848909-XZPDGGR0TIS9XJQ7KT2V/imgg-demo-iGikAGoV.png?format=500w',
  scrollThreshold: 80,
  fadeDuration: 500
};
</script>
<script src="https://code.beaverhero.com/header/0826c24v5fadelogoscroll.js"></script>