JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<ul class="main-nav">
    <li><a href="page1.html">Page 1</a></li>
    <li><a href="page2.html">Page 2</a></li>
    <li><a href="page3.html">Page 3</a></li>
</ul>

CSS

a {
  text-decoration: none;
  color: black;
}
.main-nav {
  position: relative;
}
.main-nav li {
    position: sticky;
    display: flex;
    font-size: 60px;
    line-height: 43px;
    letter-spacing: -3px;
    margin-bottom: 11px;
    transition: all 2s;
}
.slideUpSm {
    position: absolute !important;
    top: 0 !important;
}

JavaScript

$(document).ready(function(){

$(".main-nav li").each(function(){
            var h = $(this).position().top;
            $(this).css('top',h+'px');
        });

        $('.main-nav li a').click(function(e){
            e.preventDefault();
            $(this).parent().siblings().fadeOut()
            setTimeout(function() {$('.main-nav li').addClass('slideUpSm')}, 1200);
            

            if ($(this).parent()).hasClass('slideUpSm')) {
                //didn't work
            }
            
            var hTo = $(this).parent().position().top;
            
            // i need to get the new position top after the addClass slideUpSm 
            if (hTo == 0) {
              var href = $(this).attr('href');
              setTimeout(function() {window.location = href}, 100);
            }

            return false;
        })
});