JSFiddle - React, Tailwind, and code Playground

by Ahmad Baktash Hayeri

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
		
  
  		<nav class="navbar navbar-default navbar-fixed-top">
  		  <div class="header">
    		  Atención 24 horas 0800-777-8101
        </div>
        <div class="container-fluid">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span> 
            </button>
            <a class="brand" href="#"><img src="img/logo.jpg" class="logo" /></a>
          </div>
          <div class="collapse navbar-collapse" id="myNavbar">
            <ul class="nav navbar-nav">
             <li class="active"><a href="#">DSDSADSA</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
              <li><a href="#">ADSASD</a></li>
            </ul>
          </div>
        </div>
      </nav>
    
    <div style="height:1000px;background-color:#ccc;padding:50px;"></div>

CSS

.navbar {
  height: 110px;
}
div.header{
  text-align:right;
  height:50px;
}

JavaScript

$(document).ready(function(){
  $(window).scroll(function() {
    if ($(document).scrollTop() > 0) {
      console.log('a');
      if($('.navbar').is(':animated')){
      	return false;
      }
      $('.navbar').animate({height: '60px'});
      $('div.header').slideUp();
    } else {
      console.log('b');
      if($('.navbar').is(':animated')){
      	return false;
      }
      $('.navbar').animate({height: '110px'});
      $('div.header').slideDown();
    }
  });
});