How to Give Your Logo the “Slip Scroll” Effect

slip_scrol_effect.css

.container {
  overflow: hidden;
  position: relative;
  min-height: 400px;
  padding: 1em;
}
.dark {
  background: #333;
}
 
.light {
  background: #fff;
}

.default {
  position: fixed;
}
 
.moveable {
  position: absolute;
}

slip_scrol_effect.js

var setLogo = function() {
  $('.moveable').each(function() {
    $(this).css('top',
      $('.default').offset().top -
      $(this).closest('.container').offset().top
    );
  });
 
};
 
$(document).scroll(function() {
  setLogo();
});
 
setLogo();

slip_scroll_effect.html

<div class="container dark">
  <img src="img/acme-light.svg" class="default">
</div>
 
<div class="container light">
  <img src="img/acme-dark.svg" class="moveable">
</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="js/slip_scrol_effect.js"></script>