Logo Scroll Swap

Overview

This swaps the logo for headers with a transparent background when scrolling down a page. This can be great to customize your site while showing different logos.

How To Use

To create a logo scroll swap you must do the following:

• Add your logo to be shown when scrolling is active
• Add your logo to be shown when scrolling is inactive

Markup

Use logo.attr('src') to have the image source of your logo change while scrolling. Replace url-for-logo-with-scroll-state-on to the URL of your logo to display when not scrolling. Replace url-for-logo-with-scroll-state-off to the URL of your logo to display when scrolling.

$(function() {
  var logo = $('#logo a img');

  $(window).on('scroll', function() {
  if($('body').hasClass('transparent-header') || $(window).scrollTop() === 0) {
    // Replace URL with logo to show when not scrolling
    logo.attr('src', 'url-for-logo-with-scroll-state-on');
  } else {
    // Replace URL with logo to show when scrolling
    logo.attr('src', 'url-for-logo-with-scroll-state-off');
    }
  })
})();