在滚动时将图像添加到固定标题

Question

我有一个标题固定在75px。在75px我希望它过渡并有一个标志。

例如;

它说的标准：立即致电可用促销！ 888.963.8863
在75px我想：（我的LOGO）立即联系可用促销！ 888.963.8863

这里的测试页： http://www.securemyhome.com/test-pulse2

的Javascript：

var num = 75; //number of pixels before modifying styles 

$(window).bind('scroll', function() { 
if ($(window).scrollTop() > num) { 
    $('.navscroll').addClass('fixed'); 
} else { 
    $('.navscroll').removeClass('fixed'); 
} 
}); 

CSS：

.navscroll { 
position: absolute; 
width: 100%; 

} 

.fixed { 
position: fixed; 
top: 0px; 
width: 100%; 
} 

#fronttitle { 
background-image: linear-gradient(rgb(255, 194, 15) 0%, rgb(248,208, 111) 100%); 
box-shadow: 0px 1px 12px rgba(0,0,0,0.6); 
} 

#page-title { 
display: block; 
position: relative; 
z-index: 20; 
} 

标志，我希望出现： http://www.securemyhome.com/img/nav_authorized.png

谢谢！

Answer 1

我可以想到的一种方法是将图像放在标题中，但将其CSS设置为display：none;

然后它将不可见，然后当您添加固定的类与JavaScript。然后将图像设置为可见。

CSS：

.img-id-for-header { 
    display:none; 
} 

使用Javascript：

var num = 75; //number of pixels before modifying styles 

$(window).bind('scroll', function() { 
if ($(window).scrollTop() > num) { 
    $('.navscroll').addClass('fixed'); 
    $('.img-id-for-header').show(); 
} else { 
    $('.navscroll').removeClass('fixed'); 
    $('.img-id-for-header').hide(); 
} 
});