Logo appear on scroll - CSS stopped working

Site URL: https://orange-chicken-3kkp.squarespace.com/config/settings/site-visibility

Hi everyone,

Site pw is kellyrossdesign


I am trying to make the header logo on the homepage slowly appear on scroll. I have used the code below via @44degreesnorth . 

It worked perfectly and was looking beautiful, but it seems to have stopped working now for some reason. I've tried removing any new CSS that I have added today but that doesn't seem to have made a difference...

Any ideas?



.header-title-logo {
  opacity: 0;
  position: relative;
  top: -10vh;  
  transition: all 0.75s; 
}
.shrink .header-title-logo {
  opacity: 1;
  position: relative;
  top: 0;  
}

Oh I should also mention that I am targeting the home page only, so have identified that collection before  .header-title-logo

kellyrossdesign

https://orange-chicken-3kkp.squarespace.com/?noredirect

Initial: hide logo

Scroll: logo appear

Is this right?

@tuanphan yes thats right -I want the logo to fade in slowly when scroll down past the landing banner.

Add to Design > Custom CSS

header#header img {
    transition: all 0.3s;
    opacity: 0;
}
header#header.shrink img {
    opacity: 1;
    transition: all 0.3s;
}