JSFiddle - React, Tailwind, and code Playground

by Alexey Mishin

HTML

<div class="header">Шапка</div>

  <div class="column-left">
    <div class="inner">
      <h3>Персонажи:</h3>
      <ul>
        <li>Винни-Пух</li>
        <li>Ослик Иа</li>
        <li>Сова</li>
        <li>Кролик</li>
      </ul>
    </div>
  </div>
  <div class="column-right">
    <div class="inner">

      <h3>Винни-Пух</h3>

      <div id="avatar">
        <img src="https://js.cx/clipart/winnie-mult.jpg" width="200" height="150">
        <div>Кадр из мультфильма</div>
      </div>

      <p>Ви́нни-Пу́х (англ. Winnie-the-Pooh) — плюшевый мишка, персонаж повестей и стихов Алана Александра Милна (цикл не имеет общего названия и обычно тоже называется «Винни-Пух», по первой книге). Один из самых известных героев детской литературы XX века.</p>

      <p>В 1960-е—1970-е годы, благодаря пересказу Бориса Заходера «Винни-Пух и все-все-все», а затем и фильмам студии «Союзмультфильм», где мишку озвучивал Евгений Леонов, Винни-Пух стал очень популярен и в Советском Союзе.</p>

      <p>Как и многие другие персонажи книги Милна, медвежонок Винни получил имя от одной из реальных игрушек Кристофера Робина (1920—1996), сына писателя. В свою очередь, плюшевый мишка Винни-Пух был назван по имени медведицы по кличке Виннипег (Винни),
        содержавшейся в 1920-х в Лондонском зоопарке.</p>

      <p>Медведица Виннипег (американский чёрный медведь) попала в Великобританию как живой талисман (маскот) Канадского армейского ветеринарного корпуса из Канады, а именно из окрестностей города Виннипега. Она оказалась в кавалерийском полку «Форт Гарри
        Хорс» 24 августа 1914 года ещё будучи медвежонком (её купил у канадского охотника-траппера за двадцать долларов 27-летний полковой ветеринар лейтенант Гарри Колборн, заботившийся о ней и в дальнейшем). Уже в октябре того же года медвежонок был
        привезён вместе с войсками в Британию, а так как полк должен был быть в ходе Первой мировой войны переправлен во Францию, то в декабре было принято решение оставить зверя до конца...

CSS

body,
    html {
      margin: 0;
      padding: 0;
    }

    .column-left {
      float: left;
      width: 30%;
      background: #aef;
    }

    .column-right {
      margin-left: 30%;
      width: 70%;
      background: tan;
      overflow: auto;
      /* расшириться вниз захватить float'ы */
    }

    .header {
      line-height: 60px;
      background: yellow;
    }

    .inner {
      margin: 1em;
      font-size: 130%;
    }

    #avatar {
      float: left;
      margin: 0 1em .5em 0;
      border: 1px solid black;
      text-align: center;
      background: white;
    }

JavaScript

var avatar = document.getElementById("avatar");
var avatarCoords = getCoords(avatar);

document.body.onscroll = function(e) {
	var scrolled = document.documentElement.scrollTop;
  var newAv;
  
  if ( (scrolled > avatarCoords.bottom) && !newAv ) {
  	newAv = avatar.cloneNode(true);
    
    newAv.style.position = "fixed";
    newAv.style.left = 2 + "px";
    newAv.style.top = 10 + "px";
    
    document.body.appendChild(newAv);
    console.log(!newAv);
  }
  
  if( (scrolled < avatarCoords.bottom) && newAv ) {
  	newAv.parentNode.removeChild(newAv);
  }
  
}

function getCoords(element) {
	var box = element.getBoundingClientRect();
  return {
  	bottom: box.top + avatar.offsetHeight
  }
}