JQuery向上滑动和向下滑动

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

编辑：

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

来源

2014-02-25 Bas

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

http://jsfiddle.net/WkFP2/

来源

2014-02-25 19:16:45

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

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

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

是的，你有一个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); 
}) 
});

来源

2014-02-25 19:24:04 siva

您可以添加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/

来源

2014-02-25 19:42:26

编辑我的帖子上面 – Bas

JQuery向上滑动和向下滑动

回答

相关问题