Bootstrap 4 sticky navbar on scroll

<header>
           <div class="float-left logo">Company</div>
           <div class="float-right btn-right">
                   <a href="" class="btn btn-primary btn-sm mr-4">Add Listing</a>
                    
                   </div>
           <nav class="navbar navbar-expand-lg d-inline-block float-right"> 
                   <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#tolmatol-navbar" aria-controls="tolmatol-navbar" aria-expanded="false" aria-label="Toggle navigation">
                     <span class="menu-icon"></span>
                     <span class="menu-icon"></span>
                     <span class="menu-icon"></span>
                   </button>
                 
                   <div class="collapse navbar-collapse" id="tolmatol-navbar">
                     <ul class="navbar-nav ml-auto ">
                       <li class="nav-item active">
                         <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                       </li>
                       <li class="nav-item">
                         <a class="nav-link" href="#">Listing</a>
                       </li>
                       <li class="nav-item dropdown">
                         <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                           Pages
                         </a>
                         <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                           <a class="dropdown-item" href="#">Action</a>
                           <a class="dropdown-item" href="#">Another action</a> 
                           <a class="dropdown-item" href="#">Something else here</a>
                         </div>
                       </li>
                       <li class="nav-item">
                               <a class="nav-link" href="#">Extra</a>
                             </li>
                             <li class="nav-item">
                                   <a class="nav-link" href="#">Tutorial</a>
                                 </li>
                       <li class="nav-item">
                               <a class="nav-link" href="#">Contact us</a>
                             </li>
                     </ul>
                     
                   </div>
                 </nav>
                
   
   </header>
             <div class="slider">  </div>
             <div class="inner-page"></div>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>
        @import url('https://fonts.googleapis.com/css?family=Poppins:300,400,500&display=swap');
        body { font-family: 'Poppins', sans-serif; font-size: 14px;}
        header { position: absolute; width: 100%; z-index: 9999; color: #fff; transition: all 1s;}
        header .logo { margin: 12px 15px; font-size: 22px;}
        .btn-right {     margin-top: 12px; }
        .slider { background: url(https://images.pexels.com/photos/2089698/pexels-photo-2089698.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940); width: 100%; background-size: cover; height: 100vh; }
        .slider:before { position: absolute; content: ''; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.75); z-index: 9;}
        #tolmatol-navbar ul li { margin: 0px 5px;}
        #tolmatol-navbar ul li a { color: #fff;}
        .inner-page { height: 300px;}  
        header.navScroll { margin-top: -100px; }
        header.navScroll.fixed {  margin-top: 0px;  position: fixed;  top: 0px; background:#fff;}
        header.navScroll.fixed #tolmatol-navbar ul li a { color: #333;} 
        header.navScroll.fixed .logo { margin: 12px 15px; font-size: 22px; color: #333}
        a.dropdown-item { color: #333;}
        @media(max-width:991px) { 
          [type=button]:not(:disabled), [type=reset]:not(:disabled), [type=submit]:not(:disabled), button:not(:disabled) { outline: none; box-shadow: none;}
          .menu-icon { width: 30px;
    height: 3px;
    background: #fff;
    display: block;
    margin: 2px 0px 7px;
    line-height: 45px;}
          #tolmatol-navbar ul li a { color: #333;}
          .navbar-collapse{
            background: #fff; padding: 0px 40px; 
    width: 100%;
    display: block;
    float: left;
    position: fixed;
    right: 0;

          }

        }
    </style>

<script src="https://code.jquery.com/jquery-2.1.4.js"></script> 
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

        <script>
           $(window).scroll(function(){
  var header = $('header');
      scroll = $(window).scrollTop(); 
  if (scroll >= 50) header.addClass('fixed');
  else header.removeClass('fixed');
  if (scroll >= 25) header.addClass('navScroll');
  else header.removeClass('navScroll');
});
        </script>