let title = document.querySelector('.title');


function move(){
  let moveTo = (title.offsetTop) + (title.clientHeight /2);
  if(window.scrollY > moveTo){
    title.classList.add('fixedTop');
  }else{
    title.classList.remove('fixedTop');
  }
}

window.addEventListener('scroll', move);

.content {
  background-color: #ccc;
}
.content .wrap {
  max-width: 600px;
  margin: auto;
}
.content .wrap .title {
  text-align: center;
  background-color: #71ff05;
  height: 100px;
  line-height: 100px;
}
.content .wrap .txt {
  font-size: 20px;
  line-height: 3;
  padding: 20px;
  background-color: #fff;
}
.content .wrap .fixedTop {
  position: fixed;
  left: 0;
  right: 0;
}

<div class="content">
  <div class="wrap">
       <h1 class='title'>TITLE</h1>
       <p class='txt'>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut eum repudiandae cum illum porro aperiam nulla, dicta amet laboriosam a quo iste repellat? Repudiandae ea quam nemo aperiam consequatur amet sint impedit libero corrupti, similique eligendi a numquam fugit sit quia accusantium blanditiis quasi asperiores optio nesciunt. Reprehenderit, ratione suscipit. Amet blanditiis odit veritatis, molestiae quod doloribus id dolore? Sequi earum odio molestiae fuga tenetur minus quia sapiente quae, eaque explicabo doloremque sit inventore quaerat nesciunt illo sed id! Dolorum illum sit aspernatur quaerat recusandae? Voluptatem accusamus soluta id similique quia nemo nisi ea ducimus numquam iste dolorum officiis corporis voluptate, sapiente nihil sunt error cupiditate, deserunt voluptas explicabo quas, nostrum culpa rem iusto. Rem veritatis eius, sequi nesciunt distinctio quis provident optio at tempore rerum beatae neque illo numquam. Unde at quidem autem, libero vel enim molestiae recusandae, atque, repudiandae minima est. Atque est quae voluptates unde itaque reprehenderit adipisci recusandae qui corporis excepturi commodi, enim esse? Corrupti illum eius soluta. Culpa et vero ratione temporibus alias dolores repudiandae provident pariatur blanditiis eum enim quod nostrum laborum, qui quisquam atque rerum sed. Soluta in omnis quod consequuntur! Voluptatem, perferendis. Culpa officiis numquam corporis explicabo reiciendis ipsam qui sequi. Reiciendis?</p>
  </div>
</div>