CSS Header Nav / Fixed Header Nav image change

Question

I'm currently looking into creating two separate logos located on the header nav section of this website.

The current navigation before scrolling along with logo is perfect to me. The fixed nav on scroll is also perfect apart from the logo will stay the same.

I have a second logo with the opposite colour to match the white background, the problem I face is what method to use when switching the image from the first to second.

My initial approach may be to use css but as far as things stand, I'm on the fence for how to deal with this, the text for the navigation styling has been fine, it's just any idea on how to switch the image to the second one that I plan on placing there.

If anyone has a rough idea to help me out, I'll highly appreciate that and take it on board.

URL: http://94.23.211.70/~cairngorm/

check this out http://stackoverflow.com/questions/12142386/replacing-an-image-in-an-img-tag-using-css — Marisco, Nov 17 '15 at 03:00

Marisco · Answer 1 · 2015-11-17T03:59:20.620

Something like that http://www.w3schools.com/jsref/event_onscroll.asp

<script type="text/javascript">
    window.onscroll = function() {changeSource()};
    function changeSource() {
     if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
       $('.css_class_name').attr('src','new_image.png');
     } esle{
       $('.css_class_name').attr('src','old_image.png');
    } 
  }
</script>

this is also at you general.js you can customize at this point customize it at line 210

    customise the function //Sticky Menu
               var sticky_menu = function(){
    if( jQuery('.fly-header-site.fly-sticky-header-on').length > 0) {
        var header_height = jQuery('.fly-header-site').outerHeight(),
            sticky_open = header_height * 2;
        jQuery(window).on('scroll', function () {
            if (jQuery(window).scrollTop() > header_height + 5) {
                jQuery('.fly-header-site').addClass('sticky-menu').css('top', -header_height);
            } else {
                jQuery('.fly-header-site').removeClass('sticky-menu').css('top', 0);
            }

            if (jQuery(window).scrollTop() > sticky_open) {
                jQuery('.fly-header-site.sticky-menu').addClass('sticky-open')
            } else {
                jQuery('.fly-header-site.sticky-menu').removeClass('sticky-open')
                jQuery('.fly-wrap-logo').src('http://www.vectortemplates.com/raster/superman-logo-012a.png')
            }
        });
    }
};

this is on your General.JS file try to put a brake point on it and customise the function — Marisco, Nov 17 '15 at 03:55

CSS Header Nav / Fixed Header Nav image change

1 Answers1