Add Image to Fixed Header Upon Scrolling

Question

I have a header that becomes fixed at 75px. At 75px I want it to transition and have a logo on it.

For example;

Standard it says: Call Now for Available Promotions! 888.963.8863
At 75px I want: (MY LOGO) Call Now for Available Promotions! 888.963.8863

Here's the test page: 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;
}

Logo that I want to appear: http://www.securemyhome.com/img/nav_authorized.png

Thanks!

Answer 1

One way I can think of doing it is placing an image in the header but setting its css to be display:none;

It would then not be visible and then when you add the fixed class with javascript. Set the image to be visible then.

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