我有一个主题,我正在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;
}