JSFiddle - React, Tailwind, and code Playground

by Manju06

HTML

<script
    src="https://code.jquery.com/jquery-3.4.1.js"
    integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
    crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.15.1/d3.min.js"></script>
 
    <body>
      <header>
        <ul>
          <a href="#" class="logo">
            <img class='logoBanner' src="https://2.bp.blogspot.com/_ORzF0-MDB50/TUI5aoTbDrI/AAAAAAAAEy0/kVSBqTuv1N0/s1600/bufforphington.jpg" alt="">
            <img class='miniBanner' src="https://www.almanac.com/sites/default/files/users/AlmanacStaffArchive/hatching-raising-chicken-chicks_full_width.jpg" alt="">
          </a>
          <li><a href="#">Portal</a></li>
          <li><a href="#">Feedback</a></li>
          <li><a href="#">Logout</a></li>
        </ul>
      </header>
      <div class=page></div>
    </body>

CSS

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

header {
  width: 100%;
  padding: 30px 0px;
  /* revert to 50px 0px if we want the scroll animation */
  /*animation magic*/
  transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  z-index: 9999;
  top: 0;
  position: sticky;
  margin: 0;
  background-color: white;
  box-shadow: 1px 1px 16px 2px red;
}

.shrink {
  padding: 10px 0;
  box-shadow: 1px 1px 16px 2px #0000a0;
  transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
 
  display:block;
  opacity: 1;
}

.grow {
  transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
}

header.shrink .logoBanner {
  width: 8vw;
  transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
}

header.grow .logoBanner {
  width: 100vw;
  transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;

}

.miniBanner {
  display: none;
 
  opacity: 0;
  transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
}

.miniBanner.show {
  display: flex;
  transition: all 0.4s ease-in-out;

  display:block;
  opacity: 1;
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  width: 5vw;
}

.logoBanner.hide {
 
  display:none;
  opacity: 0;
  display: none;
  transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
}

ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  list-style: none;
  width: 90%;
  padding: 0;
  margin: 0;
}

a {
  width: 80px;
  display: block;
  margin: 5px;
  border-radius: 15px;
  padding-top: 5px;
}

li {
  justify-content:...

JavaScript

$(document).on("scroll", function() {
  if ($(document).scrollTop() > 40) {

    $('.miniBanner').addClass('show');
    $('.logoBanner').addClass('hide');
    $("header").addClass("shrink");
    $("header").removeClass("grow");

  } else {

    $('.miniBanner').removeClass('show');
    $('.logoBanner').removeClass('hide');
    $("header").removeClass("shrink");
    $("header").addClass("grow");
  }
});