Custom Logo Animation on Scroll – Can’t Get JavaScript Working (403 Errors)

[eduardocaballero]

Hello! i’m trying to create a simple animation for my logo where it starts large and centered at the top of the screen, then as the user scrolls down, the logo shrinks and moves to the top-left corner (like a "sticky header" effect, but animated). Here's what I have so far:

custom html:

<div class="logo-wrapper">
  <img src="https://asistenciaartistica.com/wp-content/uploads/2025/04/custom-logo.svg" alt="Logo" class="logo-svg">
</div>
<div class="scroll-spacer"></div>

CSS (added in Lay Options → Custom CSS):

.logo-wrapper {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%) scale(1);
  transform-origin: top left;
  transition: transform 0.3s ease;
  z-index: 9999;
}

body.scrolled .logo-wrapper {
  transform: translateX(0) scale(0.3);
  left: 20px;
  top: 20px;
}

.scroll-spacer {
  height: 150vh;
}

I tried adding this JavaScript (wrapped properly in <script> tags inside Lay Options → Custom HTML & CSS → Custom head content), but I keep getting 403 errors:

window.laytheme.on("newpageshown", function(){
  jQuery(window).on("scroll", function() {
    if (jQuery(window).scrollTop() > 50) {
      jQuery("body").addClass("scrolled");
    } else {
      jQuery("body").removeClass("scrolled");
    }
  });
});

Is there a correct way to implement this in Lay Theme? Or is there a better place to insert this JS to avoid the 403 error?Thanks in advance for any help!

https://jsfiddle.net/r09bfg7p/

[arminunruh]

Hey, you don't need to wrap a scroll event handler in newPageShown.

Just remove the new page shown, outer text.
Your code starts with jQuery(window).on('scroll',

I think a 403 error is not a JavaScript error. It's a HTTP error. If you Google "403 error," you will find out more. Do you have a link to the website where you are trying to do this?

[arminunruh]

Also, you don't need a scroll spacer if you have enough content on your page. If you take a look at the body class, Lay Theme already adds an HTML class when you scroll down and removes it when you scroll up.

This HTML class is called. lay-scrolled-down

So theoretically, you don't even need your JavaScript.

[eduardocaballero]

thanks! yes this is the website: https://asistenciaartistica.com

[arminunruh]

Okay, when I'm here on my Chrome browser, I can scroll down and the logo gets smaller, and I don't see any 403 error

[eduardocaballero]

I was getting the 403 error in the custom css+html section after adding javascript. now I did what you suggested and it works! only thing is every time I reach the bottom the animation goes back to what it is at the top and it glitches, what could be causing this?

[arminunruh]

Okay, yeah I see. It's better to use your JavaScript for setting the HTML class for scroll up or down.

Because my JavaScript that sets the laytheme scroll up or down class works differently.

[arminunruh]

<script>
jQuery(window).on("scroll", function() {
    if (jQuery(window).scrollTop() > 50) {
      jQuery("body").addClass("scrolled");
    } else {
      jQuery("body").removeClass("scrolled");
    }
  });
</script>

Your JavaScript needs to look like this. You need to add the script tags around your JavaScript.

[eduardocaballero]

ok thanks so much!

[eduardocaballero]

also I see you added my other website to the featured list, eduardocaballero.com, glad you liked it. love lay theme thanks for the work!

[arminunruh]

Yeah, their website is also really nice. Thanks a lot!