Opóźnienie przyklejenia menu

Question

Cześć wszystkim ! 

Zrobiłem ostatnio przyklejane menu po zjechaniu w dół strony, wszystko działa jak należy, jednakże chciałbym opóźnić troszkę nadawanie klasy. W momencie zjechania w dół menu przykleja się do górnej części, a tło robi się czarne. Chciałbym opóźnić nadanie koloru czarnego i żeby było to nadawane stopniowo w zależności jak daleko zajechaliśmy w dół strony, bo narazie lekko się zjedzie i wskakuje czarne tło, a ma pokazywać się tak łagodnie.

Oto mój kod: 

$(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();
			});
	});

Oraz klasa sticky:

.sticky{
	width: 100%;
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	z-index: 100;
	background-color: rgba(0,0,0, 0.8);
}

 

Answer 1

Może po prostu dodaj  @keyframes opacity{} do klasy scticky.