Javascript 向下滚动时隐藏导航栏顶部的徽标
我正在使用bootstrap v3.3.4制作导航标题…这是我的导航栏DOM:Javascript 向下滚动时隐藏导航栏顶部的徽标,javascript,jquery,html,css,twitter-bootstrap,Javascript,Jquery,Html,Css,Twitter Bootstrap,我正在使用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">
<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>
切换导航
-
-
我的当前输出:
向下滚动时如何隐藏铅笔公司徽标?假设当我向下滚动时,导航栏将如下所示:
当我回到顶部…我想保持在导航栏顶部的标志
公司标志样本:
以下是一个工作示例:
window.onscroll=函数(e)
{
$(“#狮子图像”).hide();
}
.test{
高度:2000px;
}
#狮子图{
显示:块;
}
让我们开始
$(函数(){
$(窗口)。滚动(函数(){
var x=$(window.scrollTop();
如果(x>=42){
$(“#标题徽标”).hide();
}否则{
$(“#标题徽标”).show();
}
});
});代码>
#标题徽标{
高度:100px;
}
身体{
高度:5000px;
}
切换导航
-
-
-
-
-
-
-
-
-
-
-
-
-
-
为什么要隐藏,因为向下滚动时它无论如何都是不可见的!你在找一个粘粘的导航条吗?是的。我现在的导航条粘在顶部。然后你就不需要隐藏了,因为没有意义了!感谢您的工作…我的意思是如何使徽标在向下滚动时隐藏如果用户向下滚动超过SCX,那么您可能需要使用viewport jQuery插件。比如说:我试过你的HTML,并在其中添加了一些css和jQuery,试着运行代码片段,有没有办法在滚动后在navbar品牌中传递徽标