Заголовок должен скользить вверх и вниз при прокрутке страницы

Question

В верхней части моей страницы есть раздел с несколькими контактными данными и ссылками на социальные сети, которые я скрываю при прокрутке вниз и которые появляются, когда вы достигаете верхней части страницы.Все, что я хотел бы, чтобы этот переход произошел более гладко.Слайд вверх и вниз был бы хорош, но мне не удалось заставить его работать.Вот то, что у меня сейчас есть:

(function($) {
  "use strict";
function mainNavbar() {
  if ($('#main_navbar').length) {
    $('#main_navbar').affix({
      offset: {
        top: 10,
        bottom: function() {
          return (this.bottom = $('.footer').outerHeight(true))
        }
      }
    });
  }
}
mainNavbar();
})

.top_header_area {
  background: #333333;
}

.top_header_area .top_nav li a {
  font: 400 14px/50px "Roboto", sans-serif;
  color: #fff;
  padding: 0;
  padding-left: 30px;
}

.top_header_area .top_nav li a i {
  color: #cc0033;
  font-size: 18px;
  padding-right: 10px;
}

.top_header_area .top_nav li a:hover,
.top_header_area .top_nav li a:focus {
  background-color: transparent;
  color: #cc0033;
}

.top_header_area .top_nav li:first-child a {
  padding: 0;
}

.top_header_area .social_nav {
  margin: 0;
  padding-top: 12px;
}

.top_header_area .social_nav li a {
  font-size: 14px;
  color: #fff;
  padding: 0;
  text-align: center;
  height: 24px;
  width: 24px;
  border-radius: 50%;
  margin-left: 10px;
}

.top_header_area .social_nav li a i {
  line-height: 24px;
}

.top_header_area .social_nav li a:hover,
.top_header_area .social_nav li a:focus {
  background: #cc0033;
  color: #333333;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="top" class="top_header_area">
  <div class="container">
    <ul class="nav navbar-nav top_nav">
      <li><a href="#"><i class="fa fa-phone"></i>317-328-8492</a></li>
      <li><a href="#"><i class="fa fa-envelope-o"></i>info@atcinc.net</a></li>
    </ul>
    <ul class="nav navbar-nav navbar-right social_nav">
      <li><a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
      <li><a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a></li>
    </ul>
  </div>
</section>
<div class="main">
<p>Here i some sample text<br>
  Scroll me<br></p>
</div>

Answer 1

 $(window).scroll(function(){
if($(window).scrollTop() > 20 ){
		 $('#top').addClass('slide');
	}
	else{
$('#top').removeClass('slide');
	}
});

.top_header_area {
  background: #333333;
}

.top_header_area .top_nav li a {
  font: 400 14px/50px "Roboto", sans-serif;
  color: #fff;
  padding: 0;
  padding-left: 30px;
}

.top_header_area .top_nav li a i {
  color: #cc0033;
  font-size: 18px;
  padding-right: 10px;
}

.top_header_area .top_nav li a:hover,
.top_header_area .top_nav li a:focus {
  background-color: transparent;
  color: #cc0033;
}

.top_header_area .top_nav li:first-child a {
  padding: 0;
}

.top_header_area .social_nav {
  margin: 0;
  padding-top: 12px;
}

.top_header_area .social_nav li a {
  font-size: 14px;
  color: #fff;
  padding: 0;
  text-align: center;
  height: 24px;
  width: 24px;
  border-radius: 50%;
  margin-left: 10px;
}

.top_header_area .social_nav li a i {
  line-height: 24px;
}

.top_header_area .social_nav li a:hover,
.top_header_area .social_nav li a:focus {
  background: #cc0033;
  color: #333333;
}
p{
position:absolute;
top:20%;
left:50%;}
.main{
width:100%;
  position:relative;
height:2000px;}

#top.slide{
  transform :translateY(-100%);
  opacity:0;
}
#top{
  transition: all 2s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="top" class="top_header_area">
  <div class="container">
    <ul class="nav navbar-nav top_nav">
      <li><a href="#"><i class="fa fa-phone"></i>317-328-8492</a></li>
      <li><a href="#"><i class="fa fa-envelope-o"></i>info@atcinc.net</a></li>
    </ul>
    <ul class="nav navbar-nav navbar-right social_nav">
      <li><a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
      <li><a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a></li>
    </ul>
  </div>
</section>
<div class="main">
  <p>scroll me</p>
</div>