javascript - 在滚动上交换我的 Logo 图像(修改现有脚本)

Question

我正在 HubSpot COS 上工作一个主题。有一些用于“粘性” header 的 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' );
                }
            }
        }

    });
}

我发现，使用此脚本，如果 header 具有“粘性”类，它将图像高度更改为 55px。我可以在这个脚本中添加一些内容来同时更改实际图像网址吗？

我想将 Logo 图像更改为“粘性”，因为标题背景颜色发生变化，并且我想将现有的全彩 Logo 替换为纯白色 Logo 。

Answer 1

您可以在“logo”jQuery 对象上使用 jQuery 的 .attr() 函数:

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