JSFiddle - React, Tailwind, and code Playground

HTML

<div class="line"></div>
<div class="outer">
    <div class="content categorys">
      <div class="content_inner">
        <div class="item bold">none</div>
        <div class="item">architect</div>
        <div class="item">design</div>
        <div class="item">strategy</div>
      </div>
    </div>
    <div class="content years">
      <div class="content_inner">
        <div class="item bold">none</div>
        <div class="item">2016</div>
        <div class="item">2015</div>
        <div class="item">2014</div>
        <div class="item">2013</div>
      </div>
    </div>
    <div class="content projects">
        <div class="content_inner">
          <div class="item bold">Content one cool</div>
          <div class="item">Content two cool</div>
          <div class="item">Content three cool</div>
          <div class="item">Content four cool</div>
          <div class="item">Content five cool</div>
          <div class="item">Content lalal cool</div>
          <div class="item">Content zazaz ffdfdf</div>
          <div class="item">Content sasafsd assasas</div>
          <div class="item">Content one cool</div>
          <div class="item">Content two cool</div>
          <div class="item">Content three cool</div>     
        </div>
    </div>    
</div>

CSS

.content::-webkit-scrollbar { width: 0 !important }

body {
  font: 12pt/14pt 'Helvetica';
  margin: 0;
  padding: 0;
}

html, body, .outer, .content {
  height: 100%;
}

.line {
  top: 50%;
  position: fixed;
  width: 100%;
  height: 1px;
  /* background-color: red; */
}

.outer {
  overflow: hidden;
  padding: 10px 0 0 10px;
  box-sizing: border-box;
}

.content {  
  overflow: scroll;
  box-sizing: border-box;
  float: left;
}

.content.projects {
  width: 440px;
}

.content.years {
  width: 160px;
}

.content.categorys {
  width: 160px;
}

.content_inner {
  top: 50%;
  padding-bottom: 100%;
  box-sizing: border-box;
  position: relative;
}

.bold {
  font: 28pt/32pt 'Helvetica';
}

JavaScript

$('.content').on('scroll', function() {
	var $self = $(this);
	$self.find('.item').each(function() {
  	var $this = $(this);
  	if ($this.offset().top - 35 <= $('.line').offset().top) {
    	$this.addClass('bold');
    	$self.find('.item').not(this).removeClass('bold');
    }
  });
});

$('.item').on('click', function() {
	$(this).closest('.content').animate({
  	'scrollTop': $('.line').offset().top
  });
});