1. Вставить код на сайт в Head / Header, Body или Footer в зависимости от возможностей вашего сайта и CMS платформы / конструктора на котором размещён сайт.
2. Отредактировать код под себя. Заменить номер телефона и никнейм Телеграм.
3. Если хотите Отключить эффект увеличения кнопок при прокрутке страницы, то просто удалите весь код, который находится в теге <script> код </script>

<div class="unique-button-container">
  <a href="<https://t.me/novergeme>" target="_blank" class="unique-button unique-button-telegram"><span>Написать в Telegram</span></a>
  <a href="<https://wa.me/79287759977>" target="_blank" class="unique-button unique-button-whatsapp"><span>Написать в WhatsApp</span></a>
</div>

<script>
let lastScroll = 0; // Переменная для хранения позиции последней прокрутки
let isHeightAdjusted = false; // Флаг для отслеживания изменения размера

function adjustButtonHeightOnScroll() {
  if (window.innerWidth <= 600) {
    const buttonContainer = document.querySelector('.unique-button-container');
    const currentScroll = window.pageYOffset || document.documentElement.scrollTop;
    const maxHeight = 17; // Максимальная высота в vh
    const minHeight = 8; // Начальная высота в vh
    const scrollThresholdForMaxHeight = 4; // Порог прокрутки для максимального размера в vh
    const scrollThresholdForMinHeight = 4; // Порог прокрутки для возврата к начальному размеру в vh

    // Проверяем, достигли ли мы верхней или нижней границы прокрутки
    const atTop = currentScroll <= 0;
    const atBottom = (window.innerHeight + currentScroll) >= document.body.offsetHeight;

    if (atTop || atBottom) {
      // Если мы в верху или низу страницы, игнорируем "отпруживание"
      return;
    }

    const scrollDown = currentScroll > lastScroll && currentScroll - lastScroll > scrollThresholdForMaxHeight;
    const scrollUp = currentScroll < lastScroll && lastScroll - currentScroll > scrollThresholdForMinHeight;

    if (scrollDown && !isHeightAdjusted) {
      // Прокрутка вниз
      buttonContainer.style.transition = 'height 0.5s ease-out'; // Плавное увеличение
      buttonContainer.style.height = `${maxHeight}vh`;
      isHeightAdjusted = true; // Указываем, что размер был изменен
    } else if (scrollUp && isHeightAdjusted) {
      // Прокрутка вверх
      buttonContainer.style.transition = 'height 0.3s ease-out'; // Плавное уменьшение
      buttonContainer.style.height = `${minHeight}vh`;
      isHeightAdjusted = false; // Возвращаем флаг к исходному состоянию
    }

    // Обновляем позицию последней прокрутки для следующего сравнения
    lastScroll = currentScroll;
  }
}

// Добавляем событие прокрутки, которое будет вызывать функцию adjustButtonHeightOnScroll
window.addEventListener('scroll', adjustButtonHeightOnScroll);
</script>

<style>
.unique-button-container {
  transform-origin: top;
  transition: height 0.5s ease; /* Плавное изменение высоты в течение 0.5 секунд */
  display: flex;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999999;
  align-items: stretch;
  height: 8vh; /* Исходная высота */
}

.unique-button {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: #ffffff !important; /* Force white text color */
  font-size: 1.8vh; /* Font size for desktop */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  letter-spacing: 0.0rem;
  border: none;
  text-align: center; /* Ensure text is centered */
  background: none; /* Remove any previous background */
}

.unique-button span {
  position: absolute;
  top: 2vh; /* Расстояние от верха кнопки до текста */
  left: 0;
  right: 0;
  margin: auto; /* Центрирование текста по горизонтали */
}

.unique-button-telegram {
  background: linear-gradient(90deg, #167ac6, #2aa2ba);
}

.unique-button-whatsapp {
  background: linear-gradient(90deg, #72bf2f, #90d936);
}

/* Adjustments for smaller screens */
@media (max-width: 600px) {
  .unique-button-container {
    height: 7vh; /* Decreased height for mobile */
  }

  .unique-button {
    font-size: 3.3vw; /* Adjusted font size for mobile readability */
    padding: 0 1vw; /* Padding to avoid text touching the edges */
  }
}

</style>