Tengo una barra de navegación fija que funciona con HTML/CSS/JavaScript. Cuando la barra de navegación se atasca al desplazarse hacia abajo, quiero que se produzcan dos animaciones; uno para texto, otro para una imagen.

Las dos secciones de JavaScript que he incluido a continuación para las animaciones funcionan individualmente, pero no puedo encontrar la manera de hacer que ambas funcionen simultáneamente.

Por favor, hágamelo saber si se requiere más información y gracias de antemano.

JavaScript:

 /*Sticky navbar*/ var height = $('#header').height(); $(window).scroll(function () { if($(this).scrollTop() > height){ $('.navbar').addClass('fixed'); }else{ $('.navbar').removeClass('sticky'); } }); /*Animates a text logo*/ $(document).ready(function(){ head = $(".navlogo"); $(document).scroll(function(){ var top = $(this).scrollTop(); if(top>5){ head.addClass('navlogoActive'); } else{ head.removeClass('navlogoActive'); head.addClass('navlogo'); } }); }); /*Animates an image*/ $(document).ready(function(){ head = $(".mascotzoom"); $(document).scroll(function(){ var top = $(this).scrollTop(); if(top>5){ head.addClass('mascotzoomActive'); } else{ head.removeClass('mascotzoomActive'); head.addClass('mascotzoom'); } }); });

CSS:

 /*Text logo*/ .navlogo{ float: left; color: #fff; transition:all .2s linear; transform:translateX(-150%); } .navlogoActive{ transform:translateX(0%); } /*Image logo*/ .mascotzoom { position: relative; display: block; width: 110px; height: 110px; transition: all, 0.5s; } .mascotzoomActive { transform: scale(0%); }