向下滾動時，導航欄頂部的徽標隱藏
[英]Logo at the top of navigation bar hide when scroll down
問題描述
我正在使用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>
我當前的輸出：
向下滾動時如何隱藏鉛筆公司徽標？ 假設向下滾動時導航欄將如下所示：
當我回到頂部...我想將徽標保留在導航欄的頂部...
公司徽標樣本：
2 個解決方案
解決方案1
1 已采納 2015-05-31 14:03:16
$(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
0 2015-05-31 10:43:50
這是一個工作示例：
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>
當切換到“移動視圖”和導航欄時，嘗試在導航欄中更改我的徽標位置變為下拉菜單
[英]Trying to change the position of my logo in the navigation bar when switching to 'mobile view' and navigation bar becomes a drop down menu
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.