Форум

Stas1985 · #1 (**permalink**) 07.10.2020, 11:19

Доброго времени суток форумчане! Подскажите пожалуйста как сделать появление изображения при скролле вниз на 200 пикселей. Сейчас код у меня такой

<div class="whatsapp">
<a href="tel:+7хххххххххх"  target="_blank" id="wa_button-phone">
<div class="img-circleblock-phone" style="transform-origin: center;"></div>
</a> 

<a href="https://api.whatsapp.com/send?phone=7хххххххххх&amp;text=Здравствуйте!%20Хочу%20проконсультироваться."  target="_blank" id="wa_button">
<div class="img-circleblock" style="transform-origin: center;"></div>
</a> 
</div>

мне необходимо отобразить изображение при скролле в низ. Вот пациент _https://lik-astana.kz
Сам в js разобраться не могу. Помогите решить задачу.

рони · #2 (**permalink**) 07.10.2020, 12:57

Stas1985,

Получение текущей прокрутки

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
 .whatsapp {
     display: none;
     position: fixed;
 }
body{
    height: 1000px;
}
 .whatsapp.show {
     display:  block;
 }
  </style>
  <script>
window.addEventListener( "scroll" , function() {
document.querySelector(".whatsapp").classList.toggle("show", this.pageYOffset > 200);
  });
  </script>
</head>

<body>
<div class="whatsapp">   whatsapp
<a href="tel:+7хххххххххх"  target="_blank" id="wa_button-phone">
<div class="img-circleblock-phone" style="transform-origin: center;"></div>
</a>

<a href="https://api.whatsapp.com/send?phone=7хххххххххх&amp;text=Здравствуйте!%20Хочу%20проконсультироваться."  target="_blank" id="wa_button">
<div class="img-circleblock" style="transform-origin: center;"></div>
</a>
</div>

</body>
</html>

Stas1985 · #3 (**permalink**) 07.10.2020, 16:00

Спасибо большое! Все работает

Форум

Справочник

Discord чат

Курсы javascript