Question

我有一个主题我正在使用HubSpot COS。有一些js用于＆＃34;粘性＆＃34;报头中。

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' );
                }
            }
        }

    });
}

我看到这个脚本，如果标题有＆＃34;粘贴＆＃34;它将图像高度更改为55px。我可以在这个脚本中添加一些可以同时更改实际图像URL的内容吗？

我想更改＆＃34;粘贴＆＃34;的徽标图片因为标题背景颜色发生了变化，我想用纯白色徽标替换现有的全彩色标识。

Answer 1

你可以在＆＃39; logo＆＃39;上使用jQuery的.attr（）函数。 jQuery对象：

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

Answer 2

更改图像src属性可能很麻烦，并不总是平滑过渡。我强烈建议您制作一个包含全彩色徽标和白色徽标的精灵。然后在滚动事件中只需更改background-position属性。您可以在此处了解有关使用精灵的更多信息： http://www.w3schools.com/css/css_image_sprites.asp

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

WHERE trunc(mytable.mydatefield) > TO_DATE('23-OCT-2015', 'DD-MON-YYYY')

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

2 个答案: