alexalexes

(function()
{
  var src = 'https://cdn.jsdelivr.net/npm/suggestions-jquery@17.12.0/dist/css/suggestions.min.css';
  var link = document.createElement('link');
  link.setAttribute('src', src);
  link.setAttribute('type', 'text/css');
  link.setAttribute('rel', 'stylesheet');
 document.head.appendChild(link);

  src = 'https://cdn.jsdelivr.net/npm/suggestions-jquery@17.12.0/dist/js/jquery.suggestions.min.js';
  var scrt = document.createElement('script');
   scrt.setAttribute('src', src);
  document.head.appendChild(scrt);
}
)();

document.getElementById('i4').innerHTML = Number(n1)*0.5;

<div class="info_block one">
<div class="one_1"></div>
 <div class="one_2"></div>
</div>
<div class="info_block two">
<div class="two_1"> </div>
<div class="two_2"> </div>
 </div>
<div class="info_block three"> 
<div class="three_1"> </div>
<div class="three_2"> </div>
</div>
<div class="info_block four">
<div class="four_1"> </div>
<div class="four_2"> </div>
 </div>

<style>
div.info_block
{
  display: none;
}
div.info_block.active
{
  display: block;
}
</style>

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

<script>
function display_div(class_name)
{
  $('div.info_block').removeClass('active');
  $('div.info_block.' + class_name).addClass('active');
}
</script>

<script>
display_div('one');
</script>

<ul>
  <li onclick="display_div('one')">Первый блок</li>
  <li onclick="display_div('two')">Второй блок</li>
  <li onclick="display_div('three')">Третий блок</li>
  <li onclick="display_div('four')">Четвертый блок</li>
</ul>

<style>
#div1
{
  display: block;
  width: 400px;
  height: 1400px;
  background-color: green;
}
#div2
{
  display: block;
  width: 400px;
  height: 400px;
  background-color: red;
}
</style>
<div id="div1">
</div>
<div id="div2">
</div>
<script>
  //Функция для определения необходимости выполнения действия,
//связанное с появлением элемента elem_id в видимой части документа
  function SomethingToDoElem(e, elem_id)
  {
    var elem = document.getElementById(elem_id);
    if(elem === null)
      return;
    //определение размера видимой части документа без JQuery
    var opera = (navigator.userAgent.toLowerCase().indexOf('opera') > -1),
    html = document.documentElement,
    body = document.body,
    w = document.compatMode=='CSS1Compat' && !opera ? html.clientWidth : body.clientWidth,
    h = document.compatMode=='CSS1Compat' && !opera ? html.clientHeight : body.clientHeight;
    // если величина прокрутки по вертикали + видимая высота документа
//превышает расстояние от верха документа до элемента,
    // для которого требуется действие доскроллинга, то выполняем это действие
    if(e.currentTarget.scrollY + h > elem.offsetTop)
    {
      var is_did_something = elem.getAttribute('is_did_something'); // если действие однократного применения,
//то получаем данные о том, что оно не выполнялось ранее, например, с помощью атрибута тега.
      if(is_did_something === null) // атрибут не создан, значит действия не было
      {
        setTimeout(function(){elem.style.backgroundColor = 'blue'; }, 1000); // выполняем действие
        elem.setAttribute('is_did_something', 1); // записываем, что действие выполнили
// для проверки однократности его выполнения
      }
    }
  }
  // Ловим события, для которых возможно понадобиться действие доскроллинга
  
  // на загрузку документа, лучше использовать JQuery аналог
  window.onload = function(e)
  {
    SomethingToDoElem(e, "div2");
  }
  
  // на прокрутку документа
  window.onscroll = function(e)
  {
    SomethingToDoElem(e, "div2");
  }
  
// на изменение размера окна документа, если дизайн резиновый
// и интересуемый элемент div2 может изменять в этом случае свое положение
// при ресайзе окна браузера.
 

// !!!: лучше не привязывать через $().on('resize', ...) криво срабатывает вызов,
// использовать только нативные способы подписки на событие.
  window.onresize = function(e)
  {
    SomethingToDoElem(e, "div2");
  }

// Также нужно вызывать  SomethingToDoElem(e, "div2"); при любом динамическом изменении
// контента страницы или блока, где этот контент расположен.
</script>