JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div id="all_content">
   <div id="wrap">
         <div class="menu">
         <a href="#aboutme">About me </a>
          <a href="#">Skills </a>
          <a href="#">What I do </a>
          <a href="#">Contact me </a>
          </div>
    <div class="imagebg"></div>
      <div id="block">
         <div class="top">
            <img src="image/logo_black.png" width="13%" alt="logo"/>
                <p class="name">Pavol Gašpár</p>
                <p class="multimedia">multimedia designer</p>
                <div class="social_icon">
                <a class="facebook" href="" target="_blank" ></a>
                <a class="linkedin" href="" target="_blank" ></a>
                <a class="skype" href="" target="_blank" ></a>
                <a class="instagram" href="" target="_blank" ></a>
                <a class="pinterest" href="" target="_blank" ></a>
            </div>
                <a class="btn_aboutme" href="#aboutme"></a>
            </div>
      </div>
       
              <div id="aboutme">
         <div class="top">
            <img src="image/logo_black.png" width="13%"/>
                <p class="name">Pavol Gašpár</p>
                <p class="multimedia">multimedia designer</p>
                <div class="social_icon">
                <a class="facebook" href="" target="_blank" ></a>
                <a class="linkedin" href="" target="_blank" ></a>
                <a class="skype" href="" target="_blank" ></a>
                <a class="instagram" href="" target="_blank" ></a>
                <a class="pinterest" href="" target="_blank" ></a>
            </div>
            </div>
      </div>
       
   </div>

</div>

CSS

html, body {
   margin:0;
   padding:0;
   height:100%;
   font-family:"raleway-regular";
   color:#262626;
   font-size:16px;
   min-height:1800px;
   }
.menu{
   width:100%;
   height:auto;
   float:left;
   margin-left:60%;
   position:relative;
   z-index:999;
   box-sizing:border-box;
   }
.menu a {
   display:inline-block;
   text-decoration:none;
   padding:2% 1% ;
   color:#262626;
   float:left;
   }
.menu a:hover {
   display:inline-block;
   text-decoration:none;
   padding:2% 1% ;
   color:#056c98;
   font-weight:bold;
   float:left;
   }
.menu-fixed {
    position: fixed;
   }

JavaScript

<!-- scrolling btn -->

$(document).ready(function(){
   $('a[href^="#"]').on('click',function (e) {
       e.preventDefault();

       var target = this.hash;
       var $target = $(target);

       $('html, body').stop().animate({
           'scrollTop': $target.offset().top
       }, 900, 'swing', function () {
           window.location.hash = target;
       });
   });
});



<!-- fixed menu -->
var mn = $(".menu");

$(window).scroll(function() {
  console.log($(this).scrollTop());
  if($(this).scrollTop() > 150 ) {
    mn.addClass("menu-fixed");
  } else {
    mn.removeClass("menu-fixed");
  }
});