有沒有一種方法可以在不使用負像素值的情況下輕鬆進出動畫div？

我希望導航欄能夠在某個錨點進出。我已經完成了任務，但是我發現在動畫發生時滾動會由於負像素值和文檔頂部而中斷動畫。有沒有辦法讓導航使用我設置的動畫，而不使用負像素值來隱藏和顯示它？有沒有一種方法可以在不使用負像素值的情況下輕鬆進出動畫div？

我試過.show（）/。hide（）選項的可見性：隱藏;但我似乎無法弄清楚如何將它們與.animate（）合併。

var t = $("#about").offset().top; 
 

 
$(window).scroll(function(){ 
 
    if($(document).scrollTop() >= t) { 
 
     $('#global-nav').stop().animate({top: '0px'}, 500, 'easeOutBounce'); 
 
    } else { 
 
     $('#global-nav').stop().animate({top: '-50px'}, 500, 'easeInExpo'); 
 
    } \t \t 
 
});

html { height: 2000px; } 
 

 
#global-nav { 
 
    height:50px; 
 
    background:#000; 
 
    z-index: 9999; 
 
    position: fixed; 
 
    left: 0; 
 
    top: -50px; 
 
    width: 100%; 
 
    color:#fff; 
 
    text-align:center; 
 
    
 
} 
 
#global-nav p { 
 
    margin-top:15px; 
 
} 
 
#about{ 
 
    margin-top:600px; 
 
}

<div id="global-nav"><p>Navigation</p>.</div> 
 

 
<div id="about"></div>

這是我迄今完成：http://jsfiddle.net/Hysteresis/0oazqj4y/43/

任何幫助將非常感激。

來源

2014-11-09 Hysteresis

你能改寫這個「我發現，滾動，而動畫正在發生將中斷動畫由於負像素值」？不清楚壽。 [這看起來很好]（http://jsfiddle.net/0oazqj4y/50/）。 – 2014-11-09 05:47:36

對不起。我想問題主要在於動畫滾動時的問題。如果用戶繼續向上滾動，則動畫會猶豫/斷斷續續，因爲它正試圖找到文檔的頂部以進行動畫備份。我增加了一個更大的餘量，所以你可以希望看到我的意思。 http://jsfiddle.net/Hysteresis/0oazqj4y/51/。 – Hysteresis 2014-11-09 06:16:02

其實你的動畫使用easing效果，因爲它看起來像是猶豫不決，但是如果你從隱藏物品時刪除easing效果，那麼它會看起來窒息;例如：

// Without "easeInExpo" easing effect 
else { 
    $('#global-nav').stop() 
    .animate({top: '-50px'}, 500); 
}

This looks smooth.

來源

2014-11-09 06:22:23

我不得不同意。謝謝！我喜歡輕鬆的效果，但是它造成了這個問題。這就是爲什麼我很好奇，除了使用負像素值之外是否有另一種隱藏導航的方法，但現在這是一個很好的解決方法。我感謝您的幫助！ – Hysteresis 2014-11-09 06:31:42

不客氣，我已經在評論中提供了一個更新的例子，可能你沒有注意到它:-) – 2014-11-09 06:32:53

啊，是的，我現在看到了。再次感謝！ – Hysteresis 2014-11-09 06:34:36

有沒有一種方法可以在不使用負像素值的情況下輕鬆進出動畫div？

回答

相關問題