płynne wskakiwanie nawigacji menu po scrollowaniu

Question

Cześć :) Mam malutki problem. Chciałabym, żeby nawigacja na mojej stronie wskakiwała nie od razu w mgnieniu oka, ale żeby przypuśćmy trwała 0.5 sekundy, taka animacja. Jak na razie posiadam następujący kod w html:
 

	<script>

	$(document).ready(function() {
	var NavY = $('.nav').offset().top;
	 
	var stickyNav = function(){
	var ScrollY = $(window).scrollTop();
		  
	if (ScrollY > NavY) { 
		$('.nav').addClass('sticky');
	} else {
		$('.nav').removeClass('sticky'); 
	}
	};
	 
	stickyNav();
	 
	$(window).scroll(function() {
		stickyNav();
	});
	});
	
</script>

Co można zrobić, żeby osiągnąć zamierzony efekt? Byłabym bardzo wdzięczna! :))
Pozdrawiam.

Answer 1

Coś takiego?

https://codepen.io/anon/pen/WKZZyZ

Najlepiej chyba w CSS to zrobić poprzez użycie @keyframes.