在滾動時將圖像添加到固定標題

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