Ciao a tutti, come da titolo, vorrei realizzare questo effetto nel sito che sto costruendo.

Ho un codice di esempio, che sto cercando di adattare al mio sito.

Questo è il codice di esempio:

codice:
<head>  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>

<header class="large">
  <div class="container">
    <nav>

      <a href="http://esempio.com"><img class="logo" src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/00/Hollywood_Sign.jpg/300px-Hollywood_Sign.jpg"></a>
        
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Posts</a></li>
        <li><a href="#">Awesome Freebies</a></li>
      </ul>
    </nav>
  </div>
</header>
<section class="stretch">

</section>    
 
   <style>

*, 
*:before, 
*:after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

ul {
    float: right;
}

li {
    display: inline;
    float: left;
}
img.logo {
  float: left;
  height: 88px;
  }
  
img.logo.large {
  height: 88px;
  }
  
img.logo.small {
  margin-top: 10px;
  height: 70px;
  }

/* Section */

section.stretch {
    float: left;
    height: 1500px;
    width: 100%;
}

/* Header */

header {
    background-color: #c7c7c7;
    border-bottom: 1px solid #aaa;
    float: left;
    width: 100%;
    position: fixed;
    z-index: 10;
}

header a {
    color: #969696;
    text-decoration: none;
    font-family: 'Amaranth', sans-serif;
    text-transform: uppercase;
    font-size: 1em;
}

header a.active, header a:hover {
    color: #3d3d3d;
}

header li {
    margin-right: 30px;
}


/* header large */
header.large {
    height: 120px;
}
header.large img {
  margin-top: 10px;
}
header.large li {
    margin-top: 52px;
}

/* header small */

header.small {
    height: 90px;
}
header.small img {
}
header.small li {
    margin-top: 25px;
}

/* Transitions */

header,
nav,
a,
img,
li {
    transition: .3s all;
    -moz-transition: .3s all;
    -webkit-transition: .3s all;
    -o-transition: .3s all;
}
  </style>
  
   <script> 
$(document).on("scroll", function() {

    if($(document).scrollTop()>100) {
        $("header").removeClass("large").addClass("small");
    } else {
        $("header").removeClass("small").addClass("large");
    }
  
      if($(document).scrollTop()>100) {
        $("img.logo").removeClass("large").addClass("small");
    } else {
        $("img.logo").removeClass("small").addClass("large");
    }
    
});
  </script>
Ora, ho riportato tutto nel mio sito, ma non funziona.

Penso che ciò dipenda dal fatto che nel mio sito il logo è visualizzato mediante questo codice:

codice:
 
<a href="https://upload.wikimedia.org/wikipedia/commons/thumb/0/00/Hollywood_Sign.jpg/300px-Hollywood_Sign.jpg" class="header__logo">
<div alt="Logo" class="logo" ></div>
</a>
Invece, nell'esempio che vi ho postato, con questo:

codice:
      
<a href="http://esempio.com">
<img class="logo" src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/00/Hollywood_Sign.jpg/300px-Hollywood_Sign.jpg">
</a>
Potreste aiutarmi a modificare il codice JS adattandolo al mio logo (invece che a quello di esempio che ho postato)?

Grazie!