ive been trying to write a code that would switch my logo at scroll. It sadly doesn’t do anything.
My website: prologue-studios.com
See the code:
In header.liquid gave the logo the id “logo”:
{%- if section.settings.logo != blank -%} {%- assign logo_alt = section.settings.logo.alt | default: shop.name | escape -%} {%- assign logo_height = section.settings.logo_width | divided_by: section.settings.logo.aspect_ratio -%} {{ section.settings.logo | image_url: width: section.settings.width | image_tag: class: 'header__heading-logo', widths: '50, 100, 150, 200, 250, 300, 400, 500', height: logo_height, width: section.settings.logo_width, alt: logo_alt, **id: 'logo'** }} {%- else -%} {{ shop.name }} {%- endif -%}I made a javascript file with the name “logoswitcher.js” and added this code:
document.addEventListener(“DOMContentLoaded”, function() {
var logo = document.getElementById(“logo”);
var scrollHeight = 100;
window.addEventListener(“scroll”, function() {
if (window.scrollY > scrollHeight) {
logo.src=“https://cdn.shopify.com/s/files/1/0670/2402/7915/files/TM-Icon-Logo-4.png?v=1676471382”;
} (This is the logo before scroll)
else {
logo.src=“https://cdn.shopify.com/s/files/1/0670/2402/7915/files/TM-Icon-Logo-3.png?v=1673102818”;
} (This is the logo after scroll)
});
});t
In the body of the theme liquid file I added this code:
{{ ‘logoswitcher.js’ | asset_url | script_tag }}
Extra info:
In the settings I’ve added the logo after scroll (https://cdn.shopify.com/s/files/1/0670/2402/7915/files/TM-Icon-Logo-3.png?v=1673102818)) as the brand logo.
Help me out please!