在滚动时交换我的徽标图像(修改现有脚本）

Swap my logo image on scroll (Modify existing script)

本文关键字：修改 脚本 图像 滚动 交换 我的      更新时间：2023-09-26

我有一个主题，我正在HubSpot COS上工作。有一些js用于"粘性"标题。

function stickyHeader( logoheight, logowidth ) {
    $(window).scroll(function() {
        if ($(window).width() >= 768) {
            var distanceY = $(window).scrollTop();
            var shrinkOn = 100;
            var header = $( '.header-container-wrapper' );
            var logo = $( '.header-container-wrapper img' );
            if (distanceY > shrinkOn) {
                if ( !header.hasClass( 'sticky' ) ) {
                    var logowith_sm = ~~ ( logowidth / logoheight * 55 );
                    logo.transition({height: '55px', width: logowith_sm + 'px'}, 300)
                }
                header.addClass( 'sticky' );
            } else {
                if ( header.hasClass( 'sticky' ) ) {
                    if ( distanceY <= shrinkOn ) {
                        logo.transition({height: logoheight + 'px', width: logowidth + 'px'}, 300)
                    }
                    header.removeClass( 'sticky' );
                }
            }
        }
    });
}

我看到，在这个脚本中，如果标头有"粘性"类，它会将图像高度更改为55px。我可以在这个脚本中添加一些东西来同时更改实际的图像url吗？

我想将徽标图像更改为"粘性"，因为页眉背景颜色发生了变化，我只想将现有的全色徽标替换为纯白色徽标。

您可以在'logo'jQuery对象上使用jQuery的.attr（）函数：

logo.attr('src', '<new image url>');

更改图像src属性可能会出现问题，而且不会总是平稳过渡。我强烈建议你考虑制作一个包含你的全彩标志和白色标志的精灵。然后在滚动事件中简单地更改背景位置属性。您可以在此处了解有关使用精灵的更多信息：http://www.w3schools.com/css/css_image_sprites.asp

以下是一个示例：https://jsfiddle.net/wxbd29ww

.logo {
  background-image: url(http://res.cloudinary.com/demo/image/sprite/w_150,h_60,c_fit/logo.png);
  background-repeat: no-repeat;
  width: 150px;
  height: 52px;
}
.logo.change {
  background-position: 0 -116px;
}
相关文章：