向下滚动时，导航栏顶部的徽标隐藏 [英] Logo at the top of navigation bar hide when scroll down
本文介绍了向下滚动时，导航栏顶部的徽标隐藏的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在使用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>
这篇关于向下滚动时，导航栏顶部的徽标隐藏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
