How To Make Logo Appear In Fixed Menu When Scrolling Down Page

on my website I have a menu that when you scroll down to 100 px the menu fixes itself to the top of the browser (top:0px; position:fixed;). However what I need is for a small logo

Solution 1:

Give your image an id <img id="myImage">

<script>
    $(document).ready(function(){
         //hides them logo when the page loads
         $("#myImage").hide();
    });

    $(document).scroll(function () {
    var y = $(document).scrollTop(),
       image = $("#myImage"),
       header = $("#menu");


    if (y >= 100) {
        //show the image and make the header fixed
        header.addClass('fixed');
        image.show();
    } else {
        //put the header in original position and hide image
        header.removeClass('fixed');
        image.hide();
    }
    });
</script>

Solution 2:

This all you need?

var logo = $('#menu li:first-child img');
if (y >= 100) {
    header.addClass('fixed');
    logo.show();
} else {
    header.removeClass('fixed');
    logo.hide();
}