How do I trigger multiple events simultaneously in JavaScript/CSS?

Question

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

https://stackoverflow.com/questions/10765755/how-to-apply-multiple-transforms-in-css — JGFMK, Feb 17 '22 at 02:09
Thank you although I'm not sure how this will work as the two transforms I want to be triggered relate to completely different elements (one being text and one being an image). Apologies if I'm missing something! — Matt H, Feb 17 '22 at 02:25

Matt H · Answer 1 · 2022-02-17T04:52:12.643

Through further trial and error, I was able to fix the issue in the JavaScript as I hoped to and got both animations working together.

Posting the fix below. Cheers to anyone reading this.

/*Sticky navbar*/
var height = $('#header').height();

$(window).scroll(function () {
  if($(this).scrollTop() > height){
    $('.navbar').addClass('fixed');
  }else{
    $('.navbar').removeClass('sticky');
  }
});


/*Animates a text logo and image logo*/
$(document).ready(function(){
  head = $(".navlogo");

  $(document).scroll(function(){
      var top = $(this).scrollTop();
    if(top>5){
      head.addClass('navlogoActive');
        $('.mascotzoom').addClass('mascotzoomActive')({
        });
    }
    else{
      head.removeClass('navlogoActive');
      head.addClass('navlogo');
        $('.mascotzoom').removeClass('mascotzoomActive')({
        });
    }
  });
});

How do I trigger multiple events simultaneously in JavaScript/CSS?

1 Answers1