JSFiddle - React, Tailwind, and code Playground

by Abdul Ahmad

HTML

<div class='box'>
  <div class='container'>
  
    <div>
      <div class='row large'>
        <div class='text'>
          words words
        </div>
      </div>
    </div>
    
    <div>
      <div class='row large'>
        <div class='text'>
          words words words
        </div>
      </div>
    </div>
    
    <div>
      <div class='row large'>
        <div class='text'>
          words wor
        </div>
      </div>
    </div>
    
  </div><!-- end container -->
</div>

CSS

.box {
  height: 2000px;
  font-family: arial;
}

.container {
  position: fixed;
  width: 100%;
  left: 10;
  top: 10;
  background-color: white;
  padding: 10px 0;
}

.row {
  background-color: tomato;
  display: inline-block;
  color: white;
  border-radius: 2px;
}

.row.large {
  margin: 5px 10px;
  padding: 5px 10px;
  transition: width 1s ease, padding 1s ease, margin 1s ease;
}
.row.large .text {
  transition: opacity 1s ease;
}

.row.small {
  margin: 2px 10px;
  transition: width 1s ease, padding 1s ease, margin 1s ease;
}

.row.small .text {
  opacity: 0;
  transition: opacity 1s ease;
}

JavaScript

$(function() {
  $(window).on('scroll', function() {
    if ($(this).scrollTop() > 50) {
      $('.large').attr('class', 'row small');
    } else {
      $('.small').attr('class', 'row large');
    }
  });
});