我目前正在一个网站上工作,并且我得到了一个导航栏,该导航栏放置在页面的底部,我希望这样做的目的是当我点击其中一个按钮时,导航栏滑到我的页面顶部,当我再次点击同一个按钮时,它会回到原来的位置(页面底部)。JQuery向上滑动和向下滑动
香港专业教育学院已经有了这块写的jQuery代码,使我的导航栏向上滑动:
的jQuery:
$(document).ready(function() {
$('.nav-top').click(function() {
$('#navigation').animate({ "top": "0" }, 500);
})
});
HTML:
<nav id="navigation">
<div class="logo">
<a href="#index"><span class="color">B</span>AICA</a>
</div>
<div id="menu">
<ul>
<li>
<a href="#" class="nav-top">About me</a>
</li>
<li>
<a href="#" class="nav-top">Portfolio</a>
</li>
<li>
<a href="#" class="nav-top">Contact</a>
</li>
</ul>
</div>
</nav>
CSS:
#navigation {
background-image: url('../images/header/navigation/bl-opacity50.png');
*background-image: url(../images/header/navigation/bl-opacity50.png);
background-repeat: repeat;
position: absolute;
width: 100%;
height: 100px;
z-index: 1000;
}
我是否必须编写某种IF语句?
编辑:
这一切都制定了罚款,但是当我试图让第二个按钮,让我的导航栏搬回我的页面的底部,它没有做任何事情,所以我想是一个用于将导航栏移动到页面顶部的按钮,以及一个用于将其移动到页面底部的按钮?
谢谢你,但是我怎么会这样动起来,所以它会慢慢地上下移动? – Bas
您需要使用jQuery UI toggleClass来执行动画:http://jqueryui.com/toggleClass/ – HJ05
--EDIT--由于顶部和底部之间的差异,在这种情况下不起作用。这可能是一个更多的帮助:http://stackoverflow.com/questions/8518400/ – HJ05