How can I make a hidden image appear after scrolling down a certain amount of pixels?

Question

I've begun experimenting with javascript/jquery and have hit my first snag. Everything works but that. I have a nav bar that fixes to the top of the page when you scroll down to it and it has a hidden image in it. I'm trying to make it visible and fade in when the nav bar hits the top and fade out when you scroll back up. I've tried using several solutions but nothing seems to work. I'm pretty sure the problem is me failing at writing this so can anyone shine some light?

CSS:

#navimg { 
    padding: 0px 0px 0px 0px; 
    margin: 0px;
    height: 45px;
    visibility: hidden; 
}

Javascript:

$(function() {
    var sticky_navigation_offset_top = $('#sticky_navigation').offset().top; 
    var sticky_navigation = function(){
        var scroll_top = $(window).scrollTop(); 

            if (scroll_top > sticky_navigation_offset_top) { 
                $('#sticky_navigation').css({ 'position': 'fixed', 'top':0, 'left':0 });
            } else {
                $('#sticky_navigation').css({ 'position': 'relative' }); 
            }   
    };

    sticky_navigation(); 
    $(window).scroll(function() { // 
         sticky_navigation();
    });
});


$(window).scroll(function(){
    if($(window).scrollTop()<200){
        $('#navimg').css({ 'visibility': 'visible' }); 
    } else {
        $('#navimg').css({ 'visibility': 'hidden' });
    } 
});

Answer 1

What I do when scroll down (navbar fixed top), I switch css class :

$(window).scroll(function () {
    if ($(".navbar").offset().top > 50) {
        $(".navbar-fixed-top").addClass("top-nav-collapse");
    } else {
        $(".navbar-fixed-top").removeClass("top-nav-collapse");
    }
});