向下滚动时，导航栏顶部的徽标隐藏 | 导航栏顶部的徽标隐藏

本文介绍了向下滚动时，导航栏顶部的徽标隐藏的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在使用bootstrap v3.3.4制作导航标题...这是我的导航栏DOM:

I'm using bootstrap v3.3.4 to make navigation header...here is my DOM for navigation bar:

<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>

我当前的输出:

向下滚动时如何隐藏铅笔公司徽标?假设向下滚动时导航栏将如下所示:

How I can hide pencil-company logo when I scroll down? Let say the navbar will be like this when I scroll down:

当我回到顶部...我想将徽标保留在导航栏的顶部...

When I go up back at the top...I want to keep the logo at the top of navigation bar...

公司徽标示例:

推荐答案

$(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>

这篇关于向下滚动时，导航栏顶部的徽标隐藏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！