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

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

我正在使用bootstrap 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>

My current output: 向下滚动时隐藏导航栏顶部的徽标

我目前的输出：

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

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

Sample of company logo:

公司徽标样本：

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

2 个解决方案

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

#2

Here is a working example:

这是一个工作示例：

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>

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

#2

Here is a working example:

这是一个工作示例：

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>

秒客网

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

2 个解决方案

#1

#2

#1

#2

相关文章