Блог

Я хочу создать анимацию элемента, для этого мне нужно взять высоту предыдущего элемента [.as-body-wrap] и использовать ее в стилях в качестве отступа сверху для элемента ниже [.as-toaster.is_open]

Вот мой HTML и jQuery:

 jQuery(document).ready(function() {
  const cta = document.querySelector('.as_header');
  const footer = document.querySelector('.as-toaster');
  const expandIcon = document.querySelector('.expand_icon');
  const asheight = document.querySelector('.as-body-wrap').offsetHeight;

  function toggleFooter() {
    footer.classList.toggle('is_open');
    expandIcon.classList.toggle('is_reversed')
  }

  cta.addEventListener('click', toggleFooter);

  // onclick action not the best implementation
  $(cta).toggle(
    function() {
      $('.as-toaster.is_open').css('margin-top', -asheight);
    },
    function() {
      $('.as-toaster').css('margin-top', '');
    }
  );

});  

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main">

  <div class="as-body-wrap">
    <h3 class="as-title">Hi! I am Andrey</h3>
    <p class="as-sub-title">fashion designer</p>
    <div class="as-description">
      <p>Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</p>
    </div>
  </div>

  <div class="as-toaster">
    <div class="as-wrapper">
      <header class="as_header">
        <div class="as-contact">Contact Me</div>
        <div class="as-contact-info">Please send me an email by filling out the form below.</div>
        <svg class="expand_icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
				<path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"></path>
				<path d="M0 0h24v24H0z" fill="none"></path>
			</svg>
      </header>
    </div>
  </div>

</div>  

Далее добавим стиль к .as-toaster.is_open margin-top: — .as-body-wrap высота

это выглядит как эта строка,

 $('.as-toaster.is_open').css('margin-top', - asheight);
  

но как получить эту высоту динамически, если эта высота может изменяться при просмотре в ландшафтном режиме

Если я правильно понимаю, вам просто нужен способ получить высоту .as-body-wrap div перед запуском анимации.

Это можно сделать с помощью функции высоты в jQuery:

 $(".as-body-wrap").height();
  

Это вернет текущую вычисленную высоту выбранного элемента.

 jQuery(document).ready(function() {
  const cta = document.querySelector('.as_header');
  const footer = document.querySelector('.as-toaster');
  const expandIcon = document.querySelector('.expand_icon');
  let asBody = $(".as-body-wrap");
  let asheight = 0;

  function setASBodyHeight() {
    asheight = asBody.height();
    console.log(`Set asheight to ${asheight}`);
  }

  function toggleFooter() {
    footer.classList.toggle('is_open');
    expandIcon.classList.toggle('is_reversed')
  }

  cta.addEventListener('click', toggleFooter);

  setASBodyHeight();
  $(window).resize(setASBodyHeight);

  // onclick action not the best implementation
  $(cta).toggle(
    function() {
      let asheight = $('.as-body-wrap').height();
      $('.as-toaster.is_open').css('margin-top', -asheight);
    },
    function() {
      $('.as-toaster').css('margin-top', '');
    }
  );

});