-1

未來我有某種與jQuery優化粘菜單。我編寫了一些代碼來檢測我們所處的高度，並在某個值將導航關閉並通過設置其位置值固定後使其變得粘稠！動畫導航菜單

下面是代碼：

$(window).scroll(function() { 
      var $locationY = $(window).scrollTop(), 
      $defaultY = 385; 

      if ($locationY < $defaultY){ 
       $('#nav').removeClass("sticky") 
             } 
        else { 
         $('#nav').addClass("sticky") 
} 
    });

，問題是我怎麼能動畫呢？從上到下很好地展示幻燈片。我想知道爲這種情況使用slideDown，animate，...方法的正確方法。

謝謝。

來源

2013-06-25 Ali Tabibzadeh

添加用CSS過渡到你粘類。 – Kyle

我會做的是有它的位置固定，其等於0減去其高度最高值。然後動畫頂部值爲0

這樣，它會從頂部酷似Facebook的時間軸菜單滑動......粘性類應該有負頂值時，JS會在動畫糾正。

$(window).scroll(function() { 
     var $locationY = $(window).scrollTop(), 
     $defaultY = 385; 

     if ($locationY < $defaultY){ 
      $('#nav').removeClass("sticky") 
            } 
       else { 
        $('#nav').addClass("sticky").animate({top:0},400); 
     } 
});

來源

2013-06-25 08:42:54 Salketer

看起來像一個很好的方法。但是你知道給定參數的動畫是什麼嗎？我沒有看到任何持續時間的名稱！ –

對不起，我的回答太快了。我糾正了動畫電話。它接收一個CSS屬性動畫的對象，第二個參數是長度，默認情況下你不需要明確地發送它。 – Salketer

是這樣的嗎？ DEMO http://jsfiddle.net/yeyene/UZgXB/1/

不知道你的粘菜單顯示在負載與否。

JQUERY

$(document).ready(function() { 
    $(window).scroll(function() { 
     if ($(this).scrollTop() > 200) { 
      $('#nav').stop() 
       .addClass('sticky') 
       .animate({ 
       'padding': '1% 2% 1% 2%' 
      }, 400, "swing"); 
     } else { 
      $('#nav').stop() 
       .removeClass('sticky').addClass('normal') 
       .animate({ 
       'padding': '6% 2% 6% 2%' 
      }, 400, "swing"); 
     } 
    }); 
});

CSS

#nav, .normal { 
    float:left; 
    margin:0; 
    padding:6% 2%; 
    width:96%; 
    background:red; 
} 
.sticky { 
    position:fixed; 
    left:0; 
    top:0; 
}

來源

2013-06-25 09:13:41 yeyene

我覺得transition可以幫助你。

#nav{ 
    transition:top 2s ease; 
}

並採用#navpostion:fixed;和top:xxxpx;像

.sticky{ 
    position:fixed; 
    top:300px; 
}

demo定位試試吧。

來源

2013-06-25 09:16:45

如果我想將導航欄放置在任何其他地方而不是瀏覽器頂部，該解決方案將非常適合！ –

@AliTabibzadeh其實你可以在任何方向做，唯一的事情是計算終端的位置，在此之後，只要設置'top'或通過JavaScript'left' CSS屬性，並轉換運行。 –

動畫導航菜單

回答

JQUERY

CSS

相關問題