2014-02-25 311 views
0

我目前正在一个网站上工作,并且我得到了一个导航栏,该导航栏放置在页面的底部,我希望这样做的目的是当我点击其中一个按钮时,导航栏滑到我的页面顶部,当我再次点击同一个按钮时,它会回到原来的位置(页面底部)。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语句?

编辑:

这一切都制定了罚款,但是当我试图让第二个按钮,让我的导航栏搬回我的页面的底部,它没有做任何事情,所以我想是一个用于将导航栏移动到页面顶部的按钮,以及一个用于将其移动到页面底部的按钮?

回答

4

使用.toggleClass并保持定位在CSS:

http://jsfiddle.net/WkFP2/

+0

谢谢你,但是我怎么会这样动起来,所以它会慢慢地上下移动? – Bas

+0

您需要使用jQuery UI toggleClass来执行动画:http://jqueryui.com/toggleClass/ – HJ05

+0

--EDIT--由于顶部和底部之间的差异,在这种情况下不起作用。这可能是一个更多的帮助:http://stackoverflow.com/questions/8518400/ – HJ05

0

是的,你有一个if语句写在你的jQuery代码。原因是,你的jQuery代码只会第一次工作,它将div从底部移动到div。当你再次点击它时,它仍然会使元素只移动到顶部。所以你需要一个if语句来计算div的当前位置并将其移动到顶部或底部。

$(document).ready(function() { 
$('.nav-top').click(function() { 
    if($('#navigation').position.top()!=0) 
     $('#navigation').animate({ "top": "0" }, 500); 
    else 
     $('#navigation').animate({ "bottom": "0" }, 500); 
}) 
}); 
0

您可以添加CSS过渡与.toggleClass如果你可以设置在#navigation.top造型高度(用85%为例)。

#navigation.top { 
    top: 85%; 
} 

的过渡

#navigation { 
    -webkit-transition: all 0.5s ease-in-out; 
    -moz-transition: all 0.5s ease-in-out; 
    -o-transition: all 0.5s ease-in-out; 
    -ms-transition: all 0.5s ease-in-out; 
    transition: all 0.5s ease-in-out; 
    position: absolute; 
    width: 100%; 
    height: 100px; 
    z-index: 1000; 
    top: 0; 
    border: 1px solid #333; 
} 

这里有一个小提琴(从以前的答案的分支)。

http://jsfiddle.net/CmbPJ/

+0

编辑我的帖子上面 – Bas