如何使用jQuery显示小徽标并隐藏棍子中的大图像

Question

我试图集成了一个小图像时，粘菜单appers请访问以下链接clickheretoseemyproblem

当我们向下滚动时，您可以看到带有小徽标的即时贴菜单，但不好看，所以我设计了一个徽标，如果即时贴菜单出现并隐藏了该图像，则需要替换徽标

这是我正在工作的代码

<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

默认情况下，在页面加载时写此行

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

然后添加以下代码片段

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

将所有代码段写入

$(document).ready(function(){

});