Change Logo image size (width and height) on scroll

Question

I've tried to use other solutions found here and on JSfiddle without success.

I use Joomla! and I need to change the logo size (H and W proportionally) when I scroll down.

I've put the logo into a custom HTML module, because that's the way my template works.

This is the code that contains the logo:

 <div id="s5_logo_wrap"> <div onclick="window.document.location.href='http://www.mysitetestscroll.com/'" class="s5_logo_module" id="s5_logo_module"> <div class="moduletable"> <div class="custom"> <img alt="Logo" src="/images/logo.png" id="s5_logo" class="s5_logo" onclick="window.document.location.href='http://www.mysitetestscroll.com'"></div> </div> </div> <div id="s5_pos_custom_1"> <div class="moduletable"> <div class="custom"> <span class="ion-ios-location address_details_icon"></span><a href="/index.php/our-location">Location</a></div> </div> <div style="clear:both; height:0px"></div> </div> <div style="clear:both; height:0px"></div> </div> 

So, I want to reduce the logo image size when I scroll down. How could I do it? Thanks in advance.

Answer 1

You could do it using jQuery + CSS:

You jQuery will look something like this:

/*----------------------------------------------------
 /*  Small Logo Upon Scroll
 /* ------------------------------------------------- */
jQuery(document).ready(function($) {
    jQuery(window).scroll(function () {
        if (jQuery(this).scrollTop() > 40) {
            jQuery('.s5_logo').addClass('small-logo');
        } else {
            jQuery('.s5_logo').removeClass('small-logo');
        }
    });
});

CSS:

.small-logo {
width: mywidth;
height: myheight;
}

For your second question, put both the small and the big logo in one .png file make sure the width is covering both of them. then do the following:

.s5_logo {
background-position: 0 0;
background-repeat: no-repeat;
-webkit-transition: background-position .4s ease-in;
-moz-transition: background-position .4s ease-in;
-o-transition: background-position .4s ease-in;
transition: background-position .4s ease-in;
}

.s5_logo_path {
background-image: url(/path/go/to/combinedlogo.png);
}

.s5_logo_path .small-logo {
background-position: 0px -122px; //here play with the position.
}

HTML:

<img alt="Logo" src="/images/logo.png" class="s5_logo s5_logo_path"></div>