Replicate decreasing size of div on scroll like premier league football website

3 views
0

Can anyone provide a quick codepen of fiddle with a replicated div to the one on fantasy premier leagues website, that enlarge when you scroll up and decreases as you scroll down?
I’ve tried and keep failing hence the question.

This is the post I have tried, I have tried to manipulate it so that the resizing begins from topscroll=0, however it keeps being gitery..

Adjust div height dynamically based on scroll

The codepen I have been working on is this:
https://codepen.io/RichardThompson/pen/NXaZoV

$(document).ready(function () {
$(window).scroll(function () {
    var scrollTop = $(window).scrollTop();
    if (scrollTop < 50) {
        maxHeight = 100;
    } else if (scrollTop > 100) {
        maxHeight = 50;
    } else {
        maxHeight = 100 - 50 * ((scrollTop - 200)) / 200;
    }
    $('#thediv').css({
        'max-height': maxHeight + "px"
    });
})
})
html, body{
  padding:0;
  margin:0;
}
body{
  height:2000px;
}
.wrapper{
  nav{
    .topnav{
      width:100%;
      height:50px;
      background-color:black;
      
      .img{
        position:fixed;
        top:0;
        left:0;
        z-index:5;
        height:100px;
        max-height:75px;
        width:300px;
        border:2px solid red;
        background-color:red;
        clip-path: polygon(0% 1%, 99% 0%, 68% 100%, 0% 99%);
      }
      
    }
    .bottomnav{
      width:100%;
      height:50px;
      background-color:grey;
    }
  }
  .main{
    height:1000px;
    background-color:blue;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='wrapper'>
  <nav>
    <div class='topnav'>
      <div class='img'>
        
      </div>
    </div>
    <div class='bottomnav'>
      
    </div>
  </nav>
  <div class='main'>
    I am main content 
  </div>
</div>

as you can see i have tried to change the figures but i just cant seem to get it to work.