Из js в html код

Question

Имеется код, выполнен с библиотекой jQuery, но, возможно, кто-то может выполнить то же действие на чистом js?

Немного данных:

Класс .rewiews - это класс, на который нужно ориентироваться, то бишь до него скрипт с Яндекс-картами не показывать.
Айди #map - уже есть на сайте (он пустой), и когда пользователь доскролил до .rewiews - добавить в div с id=map код Яндекс-карт.

    var reviews = $('.reviews');
    var reviewsTop = reviews.offset().top;
    $(window).bind('scroll', function() {
      var windowTop = $('this').scrollTop();

      if(windowTop > reviewsTop) {
      $('#map').html('Скрипт на яндекс карту')
      $('window').unbind('scroll')
       }
    });
    );

Спасибо большое за проявленный интерес и за помощь

upd* Я не силен ни в библиотеки jquery, тем более в js. Именно поэтому я хотел бы обратиться к Вам, с советом. как можно этот код выполнить на чисто js. Чтобы при достижения блока .reviews . в блок с айди map добавлялся скрипт карты. Блок с #map находиться сразу после блока с классом reviews

Answer 1

var reviews = document.querySelector('.reviews');

// Повторяем вычисление за jQuery (ссылка на код jQuery ниже)
var reviewsTop = 
    reviews.getBoundingClientRect().top + 
    reviews.ownerDocument.defaultView.pageYOffset;

window.addEventListener('scroll', appendMapOnScroll);

function appendMapOnScroll() {
    let windowTop = window.scrollY;
    
    if(windowTop > reviewsTop){
        document.querySelector('#map').innerHTML='Скрипт на яндекс карту'; 
        window.removeEventListener('scroll',appendMapOnScroll);
    }
};

Для понимания как это работает:

Answer 2

Надеюсь правильно понял вопрос

let elY = $('.rewiews').offset().top - $(window).height(), // Узнаём позицию элемента - высота экрана
    LoadMap = function() { // Создаём переменную с функцией
      if($(this).scrollTop() >= elY) { // Если текущая позиция скролла больше или равна позиции элемента, то мо доскролили до этого элемента
        $(window).unbind({
          'scroll': LoadMap,
          'resize': BindResize
        }); // Удалим обработчик, он нам больше не нужен
        $('.rewiews').html('<img src="//i.imgur.com/2fA7JXB.png">'); // Вместо Yandex карты мы добавим картинку.
        console.info('Картинка добавлена');
      }
    },
    BindResize = function () { // Т.к. позиция элемента может меняться, нужно изменять значение переменной при изменениях, в данном случае - в момент изменения размеров экрана (вьюпорта)
      elY = $('.rewiews').offset().top - $(window).height();
      console.info('resize');
    };

$(window).on({
  'scroll': LoadMap, // Обработчик скролла
  'resize': BindResize // Обработчик ресайза
});

.a {
  height: 200vh;
  background: green;
}

.b {
  height: 150vh;
  background: blue;
}

.rewiews {
  height: 100vh;
  background: red;
}

.rewiews img {
  display: block;
  width: 100%;
  object-fit: cover;
}

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

БЛОГ НА HUSL

Из js в html код

Ответы (2 шт):