I have a sticky navbar working using HTML/CSS/JavaScript. When the navbar sticks when scrolling down, I want two animations to occur; one for text, one for an image.

The two sections of JavaScript that I've included below for the animations both work individually but I can't work out how to get them to both working simultaneously.

Please let me know if any more information is required and thanks in advance.

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%);
}