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向上滑動和向下滑動

回答

相關問題