Sticky header bootstrap 4 on scroll

<div class="menu-bar">
    <div id="header-wrap">
        <nav class="navbar navbar-expand-lg">
                <a class="navbar-brand logo" href="index.html">
                <h1>Tolmatol</h1>  
                </a>
                <button onclick="myFunction(this)" class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    <div class="icon1"></div>
                    <div class="icon2"></div>
                    <div class="icon3"></div>
                    
                  </button>
                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                  <!-- Left nav -->
                  <ul id="main-menu" class="nav navbar-nav ml-auto" >
                    <li class="nav-item"> <a class="nav-link active" href="#home">Home</a> 
                    </li>
                    <li class="nav-item"> <a class="nav-link" href="#about">About</a> 
                    </li>
                    <li class="nav-item"> <a class="nav-link" href="#service">Services</a> 
                    </li>
                    <li class="nav-item"> <a class="nav-link" href="#team">Team</a> 
                    </li>
                    <li class="nav-item"> <a class="nav-link" href="#pricing">Pricing</a> 
                    </li>
                    <li class="nav-item"> <a class="nav-link" href="#blog">Blog</a> 
                    </li>
                     
                  </ul>
                </div>
                <a class="btn btn-light btn-login" href="login.html" data-text="Login"> <span>L</span><span>o</span><span>g</span><span>i</span><span>n</span>
              </a>
              </nav>
            </div>
        </div>
        <div class="clearfix"></div>
        <div class="container">
          <h2>Sticky navbar on scroll</h2>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates veritatis minus tempore ducimus perspiciatis libero vitae, aliquid id, impedit quia laudantium inventore repellat doloremque ullam, voluptatibus doloribus in assumenda. Quae. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea, impedit perspiciatis saepe quos harum odio ipsum ratione modi rem, ab eligendi molestiae quaerat nemo? Veniam cupiditate totam quae accusantium voluptates?</p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates veritatis minus tempore ducimus perspiciatis libero vitae, aliquid id, impedit quia laudantium inventore repellat doloremque ullam, voluptatibus doloribus in assumenda. Quae. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea, impedit perspiciatis saepe quos harum odio ipsum ratione modi rem, ab eligendi molestiae quaerat nemo? Veniam cupiditate totam quae accusantium voluptates?</p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates veritatis minus tempore ducimus perspiciatis libero vitae, aliquid id, impedit quia laudantium inventore repellat doloremque ullam, voluptatibus doloribus in assumenda. Quae. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea, impedit perspiciatis saepe quos harum odio ipsum ratione modi rem, ab eligendi molestiae quaerat nemo? Veniam cupiditate totam quae accusantium voluptates?</p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates veritatis minus tempore ducimus perspiciatis libero vitae, aliquid id, impedit quia laudantium inventore repellat doloremque ullam, voluptatibus doloribus in assumenda. Quae. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea, impedit perspiciatis saepe quos harum odio ipsum ratione modi rem, ab eligendi molestiae quaerat nemo? Veniam cupiditate totam quae accusantium voluptates?</p>
        </div>

 .logo h1 { color: #333; font-weight: 600; font-size: 28px;}
        .menu-bar { position: relative; font-family: 'Poppins', sans-serif;}
        .menu-bar .nav-item a { color: #333; font-weight: 500; }
        .fixed-header { position: fixed; right: 0; width: 100%; background: #03A9F4; top:0px;} 
        .navbar-expand-lg .navbar-nav .nav-link { padding-right: 1.2rem; padding-left: 1.2rem; position: relative;}
        .menu-bar .nav-item a:after { transition: all ease-in 0.5s; position: absolute;; content: ''; width: 0%; height: 2px; bottom:0px; left:50%; transform: translateX(-50%); border-radius: 2px; background: #03A9F4;}
        .menu-bar .nav-item a:hover:after { width: 40%;}
        .menu-bar .nav-item a:hover {color:#03A9F4;}
        .menu-bar .fixed-header .nav-item a {     text-shadow:0px 3px 2px rgba(51, 51, 51, 0.14901960784313725); color: #fff;}
        .menu-bar .fixed-header .nav-item a:after {background: #fff;}
        .icon1, .icon2, .icon3 {
  width: 35px;
  height: 4px;
  background-color: #333;
  margin: 6px 0;
  transition: 0.4s;
}

.close .icon1 {
  -webkit-transform: rotate(-45deg) translate(-9px, 6px);
  transform: rotate(-45deg) translate(-9px, 6px);
}

.close .icon2 {opacity: 0;}

.close .icon3 {
  -webkit-transform: rotate(45deg) translate(-8px, -8px);
  transform: rotate(45deg) translate(-8px, -8px);
}
h2  { margin: 80px 0px;}
p { padding: 40px 0px;}
    .btn-login {     position: absolute;  right: 15px; top: 12px; }    
   @media(max-width:991px){
     .menu-bar { background: #007bff;}
     .navbar-toggler {     position: absolute;  right: 90px; top:12px;}
     .menu-bar .nav-item a:after { left: 0%;}
     .menu-bar .nav-item a:hover:after { position: absolute;
    width: 40px;
    left: 20px;
    top: 19px; background: #fff;
}
.menu-bar .nav-item a { color: #fff;     transition: all ease-in 0.5s;}
.menu-bar .nav-item a:hover {
    color: #fff;
    padding-left: 45px;
}
   }

 <script>
        
  $(document).ready(function(){
    $(window).scroll(function() {
    if ($(window).scrollTop() >= 1) {
      $('#header-wrap').addClass('fixed-header');
    } else {
      $('#header-wrap').removeClass('fixed-header');
    }
  }); 
  });

    </script>

<script>
    function myFunction(x) {
      x.classList.toggle("close");
    }
    </script>