how to show small logo and hides the big images in stick using jquery

Question

I am trying to integrates a small images when the sticky menu appers please see this link clickheretoseemyproblem

When we scrolldown you can see the sticky menu with small logo but it not good to see so i designed a logo need to replace if the sticky menu appears and hides that image

here the code i am working

<header class="header" id="home">    

<!-- COLOR OVER IMAGE -->
<div class="color-overlay"> <!-- To make header full screen. Use .full-screen class with color overlay. Example: <div class="color-overlay full-screen">  -->

    <!-- STICKY NAVIGATION -->
    <div class="navbar navbar-inverse bs-docs-nav navbar-fixed-top sticky-navigation">
        <div class="container">
            <div class="navbar-header">

                <!-- LOGO ON STICKY NAV BAR -->
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#kane-navigation">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                </button>

                <a class="navbar-brand" href="#"><img src="images/logo023.png" alt=""></a>

            </div>

            <!-- NAVIGATION LINKS -->
            <div class="navbar-collapse collapse" id="kane-navigation">
                <ul class="nav navbar-nav navbar-right main-navigation">
                    <li><a href="#home">Home</a></li>  
                    <li><a href="#features">Sorrento Histology</a></li>
                    <li><a href="#brief2">Sorrento Overview</a></li>
                    <li><a href="#download">Products in Development</a></li>
                    <li><a href="#profile">Company Profile</a></li>
                    <!-- <li><a href="#screenshot-section">Screenshots</a></li> -->
                    <li><a href="#contact">Contact Us</a></li>
                </ul>
            </div>
        </div> <!-- /END CONTAINER -->
    </div> <!-- /END STICKY NAVIGATION -->


    <!-- CONTAINER -->
    <div class="container">

        <!-- ONLY LOGO ON HEADER -->
        <div class="only-logo">
            <div class="navbar">
                <div class="navbar-header">
                    <img src="images/logo.png" alt="" style="width:312px;height:187px">
                </div>
            </div>
        </div> <!-- /END ONLY LOGO ON HEADER -->

        <div class="row">
            <div class="col-md-8 col-md-offset-2">

                <!-- HEADING AND BUTTONS -->
                <div class="intro-section">

                    <!-- WELCOM MESSAGE -->
                    <h1 class="intro">Welcome to Haider Biologics</h1>
                    <h5>Want to know more?</h5>

                    <!-- BUTTON -->
                    <div class="buttons" id="download-button">

                        <a href="#download" class="btn btn-default btn-lg standard-button"><i class="icon-app-download"></i>Click Here</a>

                    </div>
                    <!-- /END BUTTONS -->

                </div>
                <!-- /END HEADNING AND BUTTONS -->

            </div>
        </div>
        <!-- /END ROW -->

    </div>
    <!-- /END CONTAINER -->
</div>
<!-- /END COLOR OVERLAY -->
</header>
<!-- /END HEADER -->

Answer 1

By default on page load write this line

$(".navbar-brand").css("display","none");

And then add this following code snippet

$(window).scroll(function () { 
var top = $(window).scrollTop();
    if(top>=100){
       $(".navbar-brand").css("display","block");
    }
    else{
       $(".navbar-brand").css("display","none");
    }
});

write all the code snippet in

$(document).ready(function(){

});