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='/'" 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=''"></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>

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./'" 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.'"></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.

• javascript
• jquery
• html
• css
• scroll

1 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/binedlogo.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>