在滾動條上更改徽標圖像的大小（寬度和高度）

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>