<!-- https://qna.habr.com/q/817579 -->
<div class="wrapper">
  <div class="articles">
    <div class="articles__item"></div>
    <div class="articles__item"></div>
    <div class="articles__item"></div>
    <div class="articles__item"></div>
    <div class="articles__item"></div>
    <div class="articles__item"></div>
    <div class="articles__item"></div>
    <div class="articles__item"></div>
    <div class="articles__item"></div>
    <div class="articles__item"></div>
    <div class="articles__item"></div>
    <div class="articles__item"></div>
    <div class="articles__item"></div>
    <div class="articles__item"></div>
    <div class="articles__item"></div>
    <div class="articles__item"></div>
    <div class="articles__item"></div>
    <div class="articles__item"></div>
    <div class="articles__item"></div>
    <div class="articles__item"></div>
    <div class="articles__item"></div>
    <div class="articles__item"></div>
    <div class="articles__item"></div>
    <div class="articles__item"></div>
    <div class="articles__item"></div>
    <div class="articles__item"></div>
    <div class="articles__item"></div>
    <div class="articles__item"></div>
    <div class="articles__item"></div>
    <div class="articles__item"></div>
    <div class="articles__item"></div>
    <div class="articles__item"></div>
    <div class="articles__item"></div>
    <div class="articles__item"></div>
    <div class="articles__item"></div>
    <div class="articles__item"></div>
    <div class="articles__item"></div>
    <div class="articles__item"></div>
    <div class="articles__item"></div>
    <div class="articles__item"></div>
    <div class="articles__item"></div>
  </div>
  <div class="sidebar">
    <div class="sidebar__sticky">
      <div class="sidebar__item"></div>
      <div class="sidebar__item"></div>
      <div class="sidebar__item"></div>
      <div class="sidebar__item"></div>
      <div class="sidebar__item"></div>
      <div class="sidebar__item"></div>
      <div class="sidebar__item"></div>
      <div class="sidebar__item sidebar__item--alt"></div>
    </div>
  </div>
</div>

:root {
  --gap: 30px;
}
.wrapper {
  display:flex;
  flex-flow:row nowrap;
  justify-content:space-around
}
.articles {
  width:60%
}
.articles__item {
  background-color:#FFF;
  border-radius:12px;
  min-height:20vh;
  margin-bottom:var(--gap)
}
.sidebar {
  width:25%;
  padding-bottom:var(--gap);
}
/*.sidebar__sticky {
  top:0;
  position:sticky;
}*/
.sidebar__item {
  background-color:rgba(255,255,255,.5);
  border-radius:12px;
  min-height:30vh;
  margin-bottom:var(--gap)
}
.sidebar__item--alt {
  min-height:10vh;
  background-color:rgba(255,255,255,.3);
}

/* HELPERS */
* {
  box-sizing:border-box;
}
html {
  padding:0;
  margin:0;
  height:100%;
  background-color:#121212;
}
body {
  padding-bottom:100vh /* add more scroll */
}

var sidebar = new StickySidebar('.sidebar', {
        containerSelector: '.wrapper',
        innerWrapperSelector: '.sidebar__sticky',
        topSpacing: 20,
        bottomSpacing: 20
    });