在导航栏隐藏的顶部标志时向下滚动(Logo at the top of navigation bar

我使用的引导v3.3.4，使导航标题...这里是我的导航栏DOM：

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">
      <img id="header-logo" src="/assets/img/dashboard/pencil_demo.png">
      <hr id="header-nav">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <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="/">Home</a>
    </div>
    <div id="navbar" class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Profile <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="/profile/">My Profile</a></li>
            <li><a href="/billing/">My Billing</a></li>
            <li><a href="/badges/">My Badges</a></li>
          </ul>
        </li>
                      <li class="dropdown">
            <a href="/friends/" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Friends <span class="caret"></span></a>
            <ul class="dropdown-menu" role="menu">
                <li><a href="/friends/">My Friends</a></li>
                <li><a href="/friends/browse/">Search Friends</a></li>
                                    <li><a href="#" onclick="sendRequestViaMultiFriendSelector();">Invite Friends</a></li>
            </ul>
        </li>
        <li><a href="/ask/">Ask Question</a></li>
        <li><a href="/review/">My Revision</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
          <li><a href=""><span class="circle-image-user" style="margin-top:-6px;"></span></a></li>
          <li><a href=""><span class="circle-image-school" style="margin-top:-6px;"></span></a></li>
          <li><a href="/dashboard/">Dashboard</a></li>
          <li><a href="/logout/">Logout</a></li>
      </ul>
    </div><!--/.nav-collapse -->
  </div>
</nav>

我的电流输出：

如何隐藏铅笔公司的标志，当我向下滚动？让说，导航栏会是这样的，当我向下滚动：

当我去要回顶......我想保持徽标导航栏的顶部...

公司标志的样本：

Answer 1:

 $(function() { $(window).scroll(function() { var x = $(window).scrollTop(); if (x >= 42) { $("#header-logo").hide(); } else { $("#header-logo").show(); } }); });

 #header-logo { height: 100px; } body { height: 5000px; }

 <html> <head> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" /> </head> <body> <nav class="navbar navbar-default navbar-fixed-top"> <div class="container-fluid"> <img id="header-logo" src="http://farm4.static.flickr.com/3254/3322981237_7e723b609e.jpg"> <hr id="header-nav"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <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="/">Home</a> </div> <div id="navbar" class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Profile <span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li><a href="/profile/">My Profile</a> </li> <li><a href="/billing/">My Billing</a> </li> <li><a href="/badges/">My Badges</a> </li> </ul> </li> <li class="dropdown"> <a href="/friends/" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Friends <span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li><a href="/friends/">My Friends</a> </li> <li><a href="/friends/browse/">Search Friends</a> </li> <li><a href="#" onclick="sendRequestViaMultiFriendSelector();">Invite Friends</a> </li> </ul> </li> <li><a href="/ask/">Ask Question</a> </li> <li><a href="/review/">My Revision</a> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href=""><span class="circle-image-user" style="margin-top:-6px;"></span></a> </li> <li><a href=""><span class="circle-image-school" style="margin-top:-6px;"></span></a> </li> <li><a href="/dashboard/">Dashboard</a> </li> <li><a href="/logout/">Logout</a> </li> </ul> </div> <!--/.nav-collapse --> </div> </nav> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> </body> </html>

Answer 2:

这是一个工作示例：

 window.onscroll = function (e) { $('#lion_image').hide(); }

 .test { height: 2000px; } #lion_image { display: block; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="test"><img src="http://www.emoticonswallpapers.com/avatar/animals/Lion-Side-Profile.jpg" alt="lion" id="lion_image"/>Let's start</div>

文章来源: Logo at the top of navigation bar hide when scroll down