在滚动时更改徽标图像大小（宽度和高度）

Question

我尝试使用在此处和 JSfiddle 上找到的其他解决方案但没有成功。

我使用 Joomla！当我向下滚动时，我需要更改徽标大小（H 和 W 成比例）。

我已将徽标放入自定义 HTML 模块中，因为这就是我的模板的工作方式。

这是包含徽标的代码：

<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>

所以，当我向下滚动时，我想减小徽标图像的大小。我怎么能做到？提前致谢。

Answer 1

你可以使用 jQuery + CSS 来做到这一点：

你的jQuery看起来像这样：

/*----------------------------------------------------
 /*  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;
}

对于您的第二个问题，将小徽标和大徽标放在一个 .png 文件中，确保宽度覆盖它们。然后执行以下操作：

.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>