将 jquery 转换为纯 JavaScript 或打字稿

Question

I don't want to use jquery in angular 4 but have the following jquery code I need to convert to either javascript or ideally typescript - help!

var pContainerHeight = $('.bird-box').height();

$(window).scroll(function(){
  var wScroll = $(this).scrollTop();
  if (wScroll <= pContainerHeight) {
    $('.logo').css({
      'transform' : 'translate(0px, '+ wScroll / 2 +'%)'
    });
    $('.back-bird').css({
      'transform' : 'translate(0px, '+ wScroll / 4 +'%)'
    });
    $('.fore-bird').css({
      'transform' : 'translate(0px, -'+ wScroll / 40 +'%)'
    });
  }
});

Answer 1

You can simplify the code slightly if there's only one element of each class, but for the general case:

const pContainerHeight = document.querySelector('.bird-box').clientHeight;

window.addEventListener('scroll', () => {
  const wScroll = window.scrollY;
  if (wScroll <= pContainerHeight) {
    document.querySelectorAll('.logo').forEach(el =>
      el.style.transform = `translate(0px, ${wScroll/2}%)`);
    document.querySelectorAll('.back-bird').forEach(el =>
      el.style.transform = `translate(0px, ${wScroll/4}%)`);
    document.querySelectorAll('.fore-bird').forEach(el =>
      el.style.transform = `translate(0px, ${-wScroll/40}%)`);
  }
});