Question

我目前正在一个网站上工作，我有一个导航栏，我放在页面底部，我想做到这一点，当我点击我的一个按钮时，导航栏向上滑动在我的页面顶部，当我再次点击同一个按钮时，它会回到原来的位置（页面底部）。

我已经用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声明？

编辑：

这一切都很好，但是当我尝试制作第二个按钮时，为了让我的导航栏移回我的页面底部，它没有做任何事情，所以我想要的是一个用于移动导航栏的按钮到页面顶部，还有一个按钮，用于将其移动到页面底部？

Answer 1

使用.toggleClass并保持CSS中的定位：

http://jsfiddle.net/WkFP2/

Answer 2

是的，您必须在jquery代码中编写if语句。原因是，你的jquery代码只能在第一次工作，它将div从bottom移到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);
})
});

Answer 3

如果您可以使用.toggleClass样式设置高度（使用85％作为示例），则可以使用#navigation.top添加css过渡。

#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/

JQuery向上和向下滑动

3 个答案: